如何使用 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:# 作为补间动画的属性。另外，您应该在持续时间后删除逗号。

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

Answer 2

只需为您的 tween/timeline 添加一个 ScrollMagic 正在使用的工具：

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

请注意，这使用了 GSAP 3 格式，但鉴于您使用的是 vh 单位，我认为您无论如何都在使用它。

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

How to delay GSAP animation with Scroll Magic plugin

javascript

jquery

scrollmagic

gsap