如何使用 Scroll Magic 插件延迟 GSAP 动画

Question

I'm trying to create simple kind of parallax animation on scroll and everything is working, but I want to add delay, for example user scrolling down and animation should catch him up, in another words, if he scrolled down 100px and stopped he should see how animation catching him up. so I have:

<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);

I tried to add delay inside Tweenmax, but it only reduce duration and trigger hook.

Thanks in advance!

Answer 1

Just add an ease to your tween/timeline that ScrollMagic is using:

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

Note that this uses GSAP 3 formatting, but I think you're using it anyway given you are using vh units.

Answer 2

You can add delay:# as an attribute to animation tweens. Also, you should remove the comma after duration.

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);