Группировка твинов в шкале времени GSAP - PullRequest
Новая
       124

Группировка твинов в шкале времени GSAP

0 голосов
/ 29 сентября 2018

Я задал тот же вопрос на форуме GSAP, но это не активный форум, как здесь, я думаю.У меня есть некоторые трудности в GSAP, я хочу сгруппировать подростков по временной шкале, а не идти по отдельности, сначала два идут одновременно, а затем вторые два и так далее ... Я действительно пытаюсь выяснить сам,Я добавляю минус задержку, но она не работает должным образом со ScrollMagic, или я не могу заставить ее работать.Вот мой код: 

let controllerPerspectiveFirst = new ScrollMagic.Controller();
perspectiveTimeline = new TimelineMax();

perspectiveTimeline
    .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut } )
    .from( '#as-perspective-bg--mountain--02', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } )
    .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, ease: Power4.easeOut } )
    .to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, ease: Power4.easeOut } )
    .from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } );

Большое спасибо.

1 Ответ

0 голосов
/ 29 сентября 2018

Благодаря удивительной документации GreenSock я нашел решение.Я просто добавляю параметр позиции (https://greensock.com/position-parameter) в конце каждой анимации.В конце: 

let controllerPerspectiveFirst = new ScrollMagic.Controller();
    perspectiveTimeline = new TimelineMax();

    perspectiveTimeline
        .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut }, 0 )
        .from( '#as-perspective-bg--mountain--02', { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 0 )
        .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, x: '-40vw', y: '-70vh', ease: Power4.easeOut }, 1 )
        .to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, x: '-40vw', y: '-28vw', ease: Power4.easeOut }, 1 )
        .from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 1 );
...