Lottie Animation on different breakpoints

Hey everyone,

I am creating a landing page project at the moment where I would like to insert a lottie animation which is playing while the user scrolls.

It was definitely a wild ride so far but we could finish and implement the Lottie animation. Now we have just one more problem where we don´t find our solution on our own:

We would like to have animation played at the process section and that it ends when it connects with the number 4 in the section. When we create the animation in the modus “scrolling while in the view” on the process container with the animation starting at 21% and ending at 81% it works fine for the different Laptop breakpoints in the animation preview mode.

As soon as I am leaving the animation preview mode, the animation ends at different positions depending on the breakpoint. Does anybody know, how I can fix this?

I already tried a lot but couldn´t find a solution so far. Therefore help is very much appreciated.

Thank you in advance!!

Here is my public share link: Webflow - susio
(how to access public share link)