Animated Lottie on Autoplay & Loop & Scroll Effect

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. It only starts and loops but doesn’t do anything on scroll. Do I need more than just html? How can I implement that to a wordpress site?

<!-- Include the required libraries -->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

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

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

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

    // 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

Do you have any idea on how to do it?

Like these guys have their icons here: Example

Thank you!