How to delay GSAP animation with Scroll Magic plugin

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.