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

Question

Я задал тот же вопрос на форуме 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 } );

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

Answer 1

Благодаря удивительной документации 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 );