Запустите две анимации одновременно, используя Scrollmagic - PullRequest
Новая
       94

Запустите две анимации одновременно, используя Scrollmagic

0 голосов
/ 19 декабря 2018

Я использую Scrollmagic и GreenSock для создания анимации на моей странице при прокрутке до определенного элемента.Мне нужно запустить несколько анимаций одновременно, но я изо всех сил пытаюсь выяснить, как это сделать.

См. Здесь: https://codepen.io/adamboother/pen/yGVpLJ?editors=1111

Я устанавливаю свои Tweens, как показано ниже: 

var tweens = new TimelineMax()
    .add(TweenMax.to("#left-panel-2", 1, {transform: "translateY(0)"}))
    .add(TweenMax.to("#left-panel-3", 1, {transform: "translateY(0)"}))
    .add(TweenMax.to("#left-panel-4", 1, {transform: "translateY(0)"}))
    .add(TweenMax.to("#left-panel-5", 1, {transform: "translateY(0)"}));

Однако мне нужно анимировать панели с правой стороны одновременно с анимацией панелей с левой стороны ... так что они все синхронизированы.Кто-нибудь может пролить свет на это, пожалуйста?

1 Ответ

0 голосов
/ 19 декабря 2018

Добавление меток к вашей временной шкале является ключевым моментом здесь.

Для повышения производительности вы должны избегать создания двух отдельных временных шкал и двух отдельных сцен для анимации справа и слева.Вместо этого добавьте анимацию для панелей справа к основной временной шкале и используйте метки, чтобы сделать их одновременными с анимацией на левой панели.

Рабочий пример: https://codepen.io/weft_digital/pen/bOBxgN?editors=1011

var tweens = new TimelineMax()
.add(TweenMax.to("#left-panel-2", 1, {transform: "translateY(0)"}),"first")
.add(TweenMax.to("#right-panel-2", 1, {transform: "translateY(0)"}),"first")
.add(TweenMax.to("#left-panel-3", 1, {transform: "translateY(0)"}), "second")
.add(TweenMax.to("#right-panel-3", 1, {transform: "translateY(0)"}), "second")
.add(TweenMax.to("#left-panel-4", 1, {transform: "translateY(0)"}), "third")
.add(TweenMax.to("#right-panel-4", 1, {transform: "translateY(0)"}), "third")
.add(TweenMax.to("#left-panel-5", 1, {transform: "translateY(0)"}), "fourth")
.add(TweenMax.to("#right-panel-5", 1, {transform: "translateY(0)"}), "fourth");
...