ScrollLottie with autoplay and loop

[DeadlyMedia]

Hey guys, I'm trying to do a lottie animation that is on autoplay and loop and also has the scrolling effect (it moves fast forward when you scroll down and fast backward when you scroll up).

I tried to generate this code using ChatGPT, but it seems to not work.

<!-- Include the required libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>

<!-- Add a container for the Lottie animation -->
<div id="lottie-container"></div>

<!-- Add a script to load and play the Lottie animation -->
<script>
    // Load the Lottie animation
    var animation = bodymovin.loadAnimation({
        container: document.getElementById('lottie-container'),
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: 'https://assets7.lottiefiles.com/packages/lf20_eyXrE5mJde.json'
    });

    // Create a GSAP timeline for the animation
    var timeline = gsap.timeline()
        .add(animation);

    // Create a ScrollMagic controller
    var controller = new ScrollMagic.Controller();

    // Create a ScrollMagic scene
    var scene = new ScrollMagic.Scene({
        triggerElement: '#lottie-container',
        triggerHook: 'onEnter',
        duration: '200%'
    })
    .setTween(timeline.timeScale(2).play()) // Play the animation and double the speed on scroll
    .addTo(controller); // Add the scene to the controller
</script>

Do you have any idea on how to do it?

Thank you!

[chrisgannon]

ScrollLottie is designed to work with Greensock's ScrollTrigger, not ScrollMagic ;)