ScrollMagic

Question

我在我的网站上使用 ScrollMagic，我希望它像这样工作 MaterializeCSS Startup Theme

我的问题是，在初始加载后，不同的容器重叠。在我完全向下滚动并再次向上滚动后，它工作正常。

为了理解我的意思，我创建了一个 Pen。

这是我的 JS：

jQuery(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();

// define movement of panels
var wipeAnimation = new TimelineMax()
    .fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "-50%", ease: Linear.easeNone}) 
    .fromTo("section.panel.turqoise", 1, {x: "-50%"}, {x: "-100%", ease: Linear.easeNone}) 
    .fromTo("section.panel.green",    1, {x:  "100%"}, {x: "50%", ease: Linear.easeNone})  
    .fromTo("section.panel.green",    1, {x:  "50%"}, {x: "100%", ease: Linear.easeNone});

// create scene to pin and link animation
new ScrollMagic.Scene({
    triggerElement: "#pinContainer",
    triggerHook: "onLeave",
    duration: "300%"
})
    .setPin("#pinContainer")
    .setTween(wipeAnimation)
    .addIndicators() // add indicators (requires plugin)
    .addTo(controller);
});

也许有人可以帮助我.. 谢谢！

Answer 1

自己修好了

问题是，我在同一个元素上多次使用函数 .fromTo()，所以在初始加载时它会将每个对象放在正确的位置并在前一个对象之上。

将代码更改为以下解决了我的问题，因为它从 FROM 侧 TO 中间滑动，然后 TO 又是一边

    // define movement of panels
    var wipeAnimation = new TimelineMax()
    .fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "-50%", ease: Linear.easeNone}) 
    .to("section.panel.turqoise", 1, {x: "-100%", ease: Linear.easeNone}) 
    .fromTo("section.panel.green",    1, {x:  "100%"}, {x: "50%", ease: Linear.easeNone})  
    .to("section.panel.green",    1, {x: "100%", ease: Linear.easeNone});

ScrollMagic - 部分擦除 - 仅在向下滚动然后向上滚动后立即起作用

ScrollMagic - Section Wipes - only works right after scrolling down and then up

javascript

jquery

html