如何使用 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

只需为 ScrollMagic 使用的补间/时间线添加一个缓和：

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