Question

我想将ScrollMagic与GSAP和TweenMax一起用于基于滚动的动画。我以前在ScrollMagic上有过一些经验，它总能正常工作。这一次，动画很慢，也是debug.Indicators。

这是我的例子： https://codepen.io/jonasloerken/pen/NvXyWW

这是一个动画流畅的外国例子：https://codepen.io/hdavtian/pen/MKNgzV

我正在使用Tween来制作动画：

var controller = new ScrollMagic.Controller();

var scene1 = new ScrollMagic.Scene({
    triggerElement: '.header-section',
    duration: "100%",
    triggerHook: 0, // don't trigger until #block hits the top of the viewport
    reverse: true
})
.setTween('.header-section .background-text', {left: '10px'})
.addIndicators()
.addTo(controller);

为什么我的动画如此缓慢且迟钝？

Answer 1

通过变换以外的任何动画制作动画总是有点生涩。正如您为“左”和“左”动画制作动画一样。财产，这就是原因。将其更新为转换效果会更好。

.setTween('.header-section .background-text', {x: '-50%'})

与GSAP相关的ScrollMagic仍然落后

1 个答案: