# Animation doesn't work with scroll

**URL:** <https://forum.lottiefiles.com/t/animation-doesnt-work-with-scroll/5968>\
**Category:** Lottie in Web\
**Created:** [July 16, 2024, 11:12am UTC](https://forum.lottiefiles.com/t/animation-doesnt-work-with-scroll/5968 "2024-07-16T11:12:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Loic\_Panchoo](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/loic_panchoo/32/3830_2.png) [@Loic\_Panchoo](https://forum.lottiefiles.com/u/Loic_Panchoo)\
**Post date:** [July 16, 2024, 11:12am UTC](https://forum.lottiefiles.com/t/animation-doesnt-work-with-scroll/5968/1 "2024-07-16T11:12:46Z")

</div>

Hello, my animation doesn’t work with scroll and I don’t understand why.

Here is my code :

```auto
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 

<dotlottie-player id="eyez" src="https://lousitasgallery.com/wp-content/uploads/2024/07/two-eyes-comp.json" style="width: 100%;" speed="1"></dotlottie-player>
<script>
const lottiePlayer = document.getElementById("eyez");

LottieInteractivity.create({
player: lottiePlayer,
 mode:"scroll",
    actions: [
      {
        visibility: [0,1],
        type: 'seek',
        frames: [0, 181],
      },
    ]
});
</script>

```

Website : [https://lousitasgallery.com/](https://lousitasgallery.com/)  
I work on wordpress with Divi Theme.

Does anyone knows why it’s not working ?

Thank you,

---

<div class="post-metadata">

**Author:** ![Teresa1](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/teresa1/32/2816_2.png) [@Teresa1](https://forum.lottiefiles.com/u/Teresa1)\
**Post date:** [January 21, 2025, 8:27am UTC](https://forum.lottiefiles.com/t/animation-doesnt-work-with-scroll/5968/3 "2025-01-21T08:27:21Z")

</div>

Hi there!  
It sounds like you’re having trouble getting your scroll animation to work with LottieFiles. Let’s see if we can figure this out together.

Here are a few things to check:

1. **Ensure the animation is within the viewport** : The scrolling effect activates when the animation enters the viewport. Make sure the animation is positioned correctly on your page1.
2. **Check the container** : Sometimes, the scroll effect might not work if the container isn’t set up correctly. You might need to specify a container for the animation2.
3. **Script loading order** : Ensure that the scripts are loaded in the correct order and that there are no conflicts with other scripts on your WordPress site.
4. **Browser compatibility** : Make sure you’re testing the animation in a compatible browser. Some older browsers might not support certain features.
5. **Debugging** : Use browser developer tools (like Chrome DevTools) to check for any errors in the console that might give you more insight into what’s going wrong.

Best regards,  
Teresa  
[Tell Culvers](https://www.tellculvers.cc)

---

<div class="post-metadata">

**Author:** ![PFM](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/pfm/32/3174_2.png) [@PFM](https://forum.lottiefiles.com/u/PFM)\
**Post date:** [January 30, 2025, 9:02pm UTC](https://forum.lottiefiles.com/t/animation-doesnt-work-with-scroll/5968/4 "2025-01-30T21:02:17Z")

</div>

> [@Loic\_Panchoo](#):
>
> Hello, my animation doesn’t work with scroll and I don’t understand why.
> 
> Here is my code :
> 
> ```auto
> <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
> <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 
> 
> <dotlottie-player id="eyez" src="https://lousitasgallery.com/wp-content/uploads/2024/07/two-eyes-comp.json" style="width: 100%;" speed="1"></dotlottie-player>
> <script>
> const lottiePlayer = document.getElementById("eyez");
> 
> LottieInteractivity.create({
> player: lottiePlayer,
> mode:"scroll",
> actions: [
> {
> visibility: [0,1],
> type: 'seek',
> frames: [0, 181],
> },
> ]
> });
> </script>
> 
> ```
> 
> Website : [https://lousitasgallery.com](https://lousitasgallery.com) [부산달리기](https://xn--bk1bp4r.info/)  
> I work on wordpress with Divi Theme.
> 
> Does anyone knows why it’s not working ?
> 
> Thank you,

your Lottie animation isn’t working due to potential script loading issues or conflicts with the Divi theme. To fix this, ensure that the Lottie and `LottieInteractivity` scripts are loaded after Divi’s own libraries to prevent any conflicts. Also, check if your WordPress setup fully supports ES6 modules, as you’re using `type="module"`. CSS or JS conflicts from Divi or other plugins might affect functionality, so inspect the container for any overriding styles. Additionally, make sure the `visibility: [0, 1]` setting is correctly triggering when the animation is within the viewport. Lastly, use the browser console to look for any errors that might provide more insights.

---

<div class="post-metadata">

**Author:** ![Dalda](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/dalda/32/4331_2.png) [@Dalda](https://forum.lottiefiles.com/u/Dalda)\
**Post date:** [February 3, 2025, 4:45am UTC](https://forum.lottiefiles.com/t/animation-doesnt-work-with-scroll/5968/6 "2025-02-03T04:45:28Z")

</div>

Thanks for sharing. It helps me a lot[.](https://7-brewsecretmenu.us/7-brew-coffee-locations/)