I've recently been using ScrollMagic, and so far it's been easy to use. However, after finishing my section slides i've noticed that whenever I load the page at the section slide top, all the slides will be visible until I update it. Returning back to the top will only show the first slide as intended? Is there a way to force update the section slides to prevent this?
Javascript:
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
.fromTo("#panel1", {x: "0%"} , {x: "100%", ease: Linear.easeNone}, 0) // in from right
.fromTo("#panel2", {x: "-100%"} , {x: "0%", ease: Linear.easeNone}, 0) // in from left
.fromTo("#panel2", {x: "0%"} , {x: "100%", ease: Linear.easeNone}, 1) // in from right
.fromTo("#panel3", {x: "-100%"} , {x: "0%", ease: Linear.easeNone}, 1); // in from left
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: ".main",
triggerHook: "onLeave",
duration: "300%"
})
.on("start", function (event) {
})
.setPin(".main")
.setTween(wipeAnimation)
.addTo(controller);
...and HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div id="panel1" class="panel">
<p>redacted</p>
</div>
<div id="panel2" class="panel">
<p>redacted</p>
</div>
<div id="panel3" class="panel">
<p>redacted</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<script src="index.js"></script>
</body>
</html>
Tried using both enter and start events to trigger
scene.update(true);
, but it doesn't work.