Streaming live at 10am (PST)

How do I trigger a Lottie animation on scroll?

#1

Hey all,

I have a Lottie interaction I’m using for a checklist element on my site. I want to trigger the animation to play once the checklist is scrolled into view. Does anyone know what I would need to add to the custom code to make this trigger work? Here is the code I’m using:

<script>var loader = document.getElementsByClassName("bodymovin");
function loadBMAnimation(loader) {  
  var animation = bodymovin.loadAnimation({   
    container: loader,    
    renderer: "svg",    
    loop: true,    
    autoplay: true,   
    path: "https://raw.githubusercontent.com/pherzo/lottie-checkmarks/master/5242-check-orange.json"  });  
}
for (var i = 0; i < loader.length; i++) {  loadBMAnimation(loader[i]);}</script>

Appreciate any help!


Read only link here: https://preview.webflow.com/preview/partnology?utm_source=partnology&preview=b81b3264eaa45979525fb0f3bd51fd4f

The interaction is on the “Work for Us” Page

#2
    <script>
// sets default vlaue of surrounding div to none so it doesnt appear
let animationDiv = document.getElementById('scrollingArea')
animationDiv.style.display = "none"

// need to pass in the div where you want the item to load and the file location
function loader(div, pathLocation) {
    let animation = bodymovin.loadAnimation({
        container: div,
        renderer: "svg",
        loop: 1,
        autoplay: true,
        path: pathLocation
    });
    animation.play();
}

window.addEventListener('scroll', () => {
    // can set scroll height by changing the number
    let scrollHeightPercent = document.documentElement.scrollHeight * 0.08
    let currentPOS = document.documentElement.scrollTop || document.body.scrollTop

        // once the scroll height has gone past the % stated abvoe it will make the style appear
    if (currentPOS >= scrollHeightPercent) {
        let animationDiv = document.getElementById('scrollingArea');
        if (animationDiv.style.display == 'none') {
            // stuff here
            animationDiv.style.display= ""
            
            let bodyMotion1 = document.getElementById('lottie-scroll-1');
            loader(bodyMotion1, "YOUR_ANIMATION_PATH")
        };
    };
});
</script>
#5

Awesome thank you so much @Pablo_Cortes! So do I just need to add the scrollingArea ID to the wrapper around the lottie animation that I want to trigger when scrolled into view?

#6

@prettynicewebsites I think so, once you add the ID of your wrapper the code should work. Let me know if it does.