Lottie plays on page load instead of waiting to be scrolled into view

Lottie in Web
1

Here’s my script, why is the lottie playing on page load instead of waiting until it is scrolled into view? Please help!

<script>      
LottieInteractivity.create({
  player:"#frameworkLottie",
  mode:"scroll",
  actions: [
    {
      visibility: [0.1, 0.2],
      type: "stop",
      frames: [0]
    },
    {
      visibility: [0.2, 0.45],
      type: "seek",
      frames: [0, 113]
    },
    {
      visibility: [0.45, 1.0],
      type: "stop",
      frames: [113, 228]
    }
  ]
});
</script>
2

Would this page help you out?

3

Thank you for responding, but that is the page I copied my code from. I have since checked the Console on Chrome and see I’m getting an error that the player is invalid. I’m not sure why, I have it set up with an ID and am using the player code from the page you mentioned.

1 Like
4

Hey @bhawk I found this video tutorial, maybe that will help?

Also, as a work around I used to just add a delay on the animations, like 3-4 seconds, to get around that.

5

Thank you @irbypace … I’ve realized the problem is happening in Chrome only. But your work around sounds like a good idea.

1 Like
6

Awesome! Glad to help out!

7

Did you ever have any luck with this?

8

Isn’t this video just for Webflow?

1 Like