@shadooowww

GSAP/ScrollMagic Как реализовать такой слайдер/сцену?

Доброго времени суток! Нужно реализовать вот такой слайдер https://drive.google.com/file/d/1vQy5BA_RY1u4EITYK... . Однако, хоть на рендере отображено, что он заполняет весь экран, на самом деле это не так. Нужно что бы он просто увеличивался немного и имел фиксированный размер, на пример 1280х700.

Такие сложные анимации вообще никогда не делал, а таску нужно было сделать вчера.

На текущий момент проблема в том, что мне нужно увеличивать высоту и ширину при входе в зону слайдера, а при выходе сбрасывать её, и при возврате нужно её повторять(именно увеличение), а не прокручивать обратно. При этом просто тоглить я не могу, так как увеличение должно быть привязанно к скроллу.

https://codepen.io/glem1337/pen/bGeGLWY?editors=1000

Также я не могу понять как убрать воздух под блоком таким образом, что бы скроллинг остался но блок визуально находился рядом с контентом.

Вопросы:
  1. На текущий момент я использую только GSAP. Для реализации такого слайдера мне достаточно будет его, или нужно подключать и ScrollMagic?
  2. Каким подходом/свойством я могу воспользоваться что бы увеличивать блок при входе, по окончанию сбрасывать, а при возврате увеличивать его и в итоге в конце опять сбрасыавть, а не проигрывать анимацию в обратную сторону? На видео показанно что я имею ввиду.
  3. Каким подходом/трюком можно сделать так что бы блок был визуально рядом с контентом и не было воздуха под ним? При этом скроллинг должен быть.


UPD: Каким образом убрать воздух, кажется я разобрался. https://codepen.io/glem1337/pen/bGeGLWY?editors=1000
UPD2: Пока что получилось сделать так https://codepen.io/glem1337/pen/bGeGLWY . Остались актуальными вопросы 1 и 2.
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы