How do I trigger a Lottie animation on scroll?

Design help Custom code
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!
https://partnology.webflow.io/candidates/openings
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.

7

Hola @Pablo_Cortes,

I got the exact same problem in this prototype here: https://nimbusnectar.webflow.io/

The “LogoIntoView” Lottie element’s playback should be triggered at the exact same moment as the “VideoIntoView” MP4 element through the “hide-show-video” interaction. It needs to play only once, and to play again when the user goes back into view.

Here’s the read-only link: Webflow - NimbusNectar

Could you please help me implement this snippet of code with my own class names, as I’m a total newbie in .js? You can’t imagine how much that would help me.

Muchisimas gracias por adelante!

8

Hello @Pierre-Etienne_Poul1, you don’t need the above code anymore, the code was for when Webflow didn’t have Lottie+Interactions, you can do it all in Webflow now. And now you have control of the Lottie through interactions, but you can’t control the video, that plays on page load. Since it is a short video you could loop it, but I don’t know how you can time the lottie to end exactly as the video begins. What you can do is to combine the Lottie and the video into one Lottie or turn the video into a Lottie animation and that way you can control both through interactions. I hope this helps!

9

Thank you @Pablo_Cortes

The thing is that the scroll into view video needs to be an MP4 otherwise the size will be overwhelming (Can’t wait for Webflow to release a “whileScrolling video scrubbing” à la Apple!)

Are you sure there is no way I can implement your old solution above?

I already have a generic script that allows the MP4 to playback when it’s 80% revealed into view.

The thing is that I don’t want to loop the Lottie anim. It is the exact same length and dimension as the MP4 and should playback only once and triggered at the exact same time.

Again, it seems your script allows exactly that. I’m just too stupid to test it because I know nothing about coding.

I’m kinda in a rush here. I know you are glad to help, but let me sweeten the deal by putting 0.025ETH on the line for you, would you help me solve this issue :slight_smile:

10

@Pablo_Cortes While at it, I’m sure we could even tweak the “repeat playback” script for the MP4 by allowing it to restart playback “into view” even though the video is not 100% finished. Then the experience would be absolutely perfect.

11

Hey @Pierre-Etienne_Poul1, I can’t really put much time to your problem, specially because it would required testing, and back and forth communication, sorry, I should be working right now lol. But like I mentioned earlier combining or making the video into a lottie should be your best option. You can upload .lottie files, they are much smaller, not just .json. Good luck!

12

OH! .lottie files are supported. I’ll def. look into it. Huge thanks!

1 Like
13

@Pablo_Cortes Just wanted to thank you for your help. Indeed, I wasn’t aware Webflow now allowed Lottie files to be controlled within the scrollIntoView interaction. That’s exactly what I needed. I also subscribed to LottieFiles and optimized a lot of my files using Opt DotLotties format.

The result is dope: https://nimbusnectar.webflow.io :slight_smile:

Cheers!

14

Hey @Pierre-Etienne_Poul1, that is great, well done, the result is awesome. I’m glad I was able to help!

1 Like