Streaming live at 10am (PST)

How do I trigger a Lottie animation on scroll?

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: ""  });  
for (var i = 0; i < loader.length; i++) {  loadBMAnimation(loader[i]);}</script>

Appreciate any help!

Read only link here:

The interaction is on the “Work for Us” Page

// sets default vlaue of surrounding div to none so it doesnt appear
let animationDiv = document.getElementById('scrollingArea') = "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

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 ( == 'none') {
            // stuff here
            let bodyMotion1 = document.getElementById('lottie-scroll-1');
            loader(bodyMotion1, "YOUR_ANIMATION_PATH")

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?

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