Доброго времени суток! Нужно реализовать вот такой слайдер
https://drive.google.com/file/d/1vQy5BA_RY1u4EITYK... . Однако, хоть на рендере отображено, что он заполняет весь экран, на самом деле это не так. Нужно что бы он просто увеличивался немного и имел фиксированный размер, на пример 1280х700.
Такие сложные анимации вообще никогда не делал, а таску нужно было сделать вчера.
На текущий момент проблема в том, что мне нужно увеличивать высоту и ширину при входе в зону слайдера, а при выходе сбрасывать её, и при возврате нужно её повторять(именно увеличение), а не прокручивать обратно. При этом просто тоглить я не могу, так как увеличение должно быть привязанно к скроллу.
https://codepen.io/glem1337/pen/bGeGLWY?editors=1000
Также я не могу понять как убрать воздух под блоком таким образом, что бы скроллинг остался но блок визуально находился рядом с контентом.
Вопросы:
- На текущий момент я использую только GSAP. Для реализации такого слайдера мне достаточно будет его, или нужно подключать и ScrollMagic?
- Каким подходом/свойством я могу воспользоваться что бы увеличивать блок при входе, по окончанию сбрасывать, а при возврате увеличивать его и в итоге в конце опять сбрасыавть, а не проигрывать анимацию в обратную сторону? На видео показанно что я имею ввиду.
- Каким подходом/трюком можно сделать так что бы блок был визуально рядом с контентом и не было воздуха под ним? При этом скроллинг должен быть.
UPD: Каким образом убрать воздух, кажется я разобрался.
https://codepen.io/glem1337/pen/bGeGLWY?editors=1000
UPD2: Пока что получилось сделать так
https://codepen.io/glem1337/pen/bGeGLWY . Остались актуальными вопросы 1 и 2.
Простой