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