Animation doesn't work with scroll

Lottie in Web
1

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

Here is my code :

<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/
I work on wordpress with Divi Theme.

Does anyone knows why it’s not working ?

Thank you,

3

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

4

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.

6

Thanks for sharing. It helps me a lot.