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

Question

我正在尝试在滚动上创建简单的视差动画，并且一切正常，但是我想增加延迟，例如，用户向下滚动并且动画应将他赶上，换句话说，如果他向下滚动100px并停止他应该看到动画如何赶上他。所以我有：

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

我的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

您可以添加delay：＃作为补间动画的属性。另外，您应在持续时间后删除逗号。

Answer 2

只需为您的ScrollMagic使用的补间/时间线添加轻松度：