1 2window.addEventListener("load", function(event) { 3// https://scrollmagic.io/docs/index.html 4// http://scrollmagic.io/examples/basic/reveal_on_scroll.html 5 const controller = new ScrollMagic.Controller(); 6 7// animate__animated animate__fadeInLeft 8 const animatedElements = document.getElementsByClassName("animate__animated"); 9 10// duration: 100 // the scene should last for a scroll distance of 100px 11// offset: 50 // start this scene after scrolling for 50px 12// reverse when scrolling past it by supplying a duration 13 for (let i = 0; i < animatedElements.length; i++) { // create a scene for each element 14 let revealElement = animatedElements[i]; 15 let $dataAnimatedClass = revealElement.getAttribute("data-animated-class") 16 new ScrollMagic.Scene({ 17 triggerElement: revealElement, // y value not modified, so we can use element as trigger as well 18 triggerHook: 0.8, //0.9, // show, when scrolled 10% into view (or "onEnter") 19 offset: 0, // start a little later 20 duration: "80%", // hide 10% before exiting view (80% + 10% from bottom) 21 // reverse: false // only do once, stay in state once triggered, 22 }) 23 .setClassToggle(revealElement, $dataAnimatedClass) // add class toggle 24 .addIndicators({name: "animation " + (i + 1)}) // add indicators (requires plugin) 25 .addTo(controller); 26 } 27}); 28 29