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 - Section Wipes - 仅在向下滚动然后向上滚动后才能正常工作

1 个答案: