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

Question

我正在尝试在滚动上创建简单的视差动画，一切正常，但我想添加延迟，例如用户向下滚动，动画应该 catch 他，换句话说，如果他向下滚动 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 中添加延迟，但它只会减少持续时间和触发钩子(Hook)。

提前致谢!

Answer 1

只需向 ScrollMagic 使用的补间/时间线添加缓动即可:

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

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