ScrollMagic - 部分擦拭 - 仅在向下滚动然后向上滚动后才有效答案

【问题标题】：ScrollMagic - Section Wipes - only works right after scrolling down and then upScrollMagic - 部分擦拭 - 仅在向下滚动然后向上滚动后才有效
【发布时间】：2017-11-04 15:42:00
【问题描述】：

我在我的网站上使用 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);
});

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

【问题讨论】：

标签： javascript jquery html scrollmagic

【解决方案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});

【讨论】：