Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带GSAP的ScrollMagic_Javascript_Jquery_Gsap_Scrollmagic - Fatal编程技术网

Javascript 带GSAP的ScrollMagic

Javascript 带GSAP的ScrollMagic,javascript,jquery,gsap,scrollmagic,Javascript,Jquery,Gsap,Scrollmagic,我想将ScrollMagic与GSAP和TweenMax一起用于基于滚动的动画。过去我对ScrollMagic有过一些经验,它总是很好用。这一次,动画速度非常慢,debug.Indicators也很慢 这是我的例子: 这是一个具有平滑动画的外国示例: 我正在使用Tween制作动画: var controller = new ScrollMagic.Controller(); var scene1 = new ScrollMagic.Scene({ triggerElement: '.

我想将ScrollMagic与GSAP和TweenMax一起用于基于滚动的动画。过去我对ScrollMagic有过一些经验,它总是很好用。这一次,动画速度非常慢,debug.Indicators也很慢

这是我的例子:

这是一个具有平滑动画的外国示例:

我正在使用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);

为什么我的动画如此缓慢和滞后?

通过变换以外的任何方式制作动画总是有点急促。在设置“left”属性的动画时,这就是原因。将其更新为转换效果更好

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