Как отложить анимацию GSAP с помощью плагина Scroll Magi c

Question

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

<div class="container">
 <img src="...">
</div>

CSS:

.container {
 position: relative;
 height: 100vh;
 width: 100%;
 overflow: hidden;
}
img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 120%;
 object-fit: cover;
}

My JS:

const controller = new ScrollMagic.Controller();

const titleParallaxScene = new ScrollMagic.Scene({
    triggerElement: '.container',
    triggerHook: 0,
    duration: '100%',
})
.setTween(TweenMax.to('.container img', 1, {y: '-20vh'}))
.addIndicators()
.addTo(controller);

Я пытался добавить задержку внутри Tweenmax, но это только уменьшите длительность и нажмите курок.

Заранее спасибо!

Answer 1

Просто добавьте легкость вашей анимации / шкалы времени, которую использует ScrollMagi c:

.setTween(gsap.to('.container img', {duration: 1, y: '-20vh', ease: 'power3.in'}))

Обратите внимание, что это использует форматирование GSAP 3, но я думаю, что вы используете его в любом случае, если вы используете VH единиц.

Answer 2

Вы можете добавить задержку: # в качестве атрибута анимации анимации. Кроме того, вы должны удалить запятую после продолжительности.

const controller = new ScrollMagic.Controller();

const titleParallaxScene = new ScrollMagic.Scene({
    triggerElement: '.container',
    triggerHook: 0,
    duration: '100%' /* remove comma here */
})
.setTween(TweenMax.to('.container img', 1, {y: '-20vh', delay: 2})) /* add delay */
.addIndicators()
.addTo(controller);