I have been facing trouble with scroll animation. I noticed it while trying lottie animations. When I try to add a scroll animation and set 0% and 100% scroll actions and then view it in preview mode, the scroll action jumps to a random percentage and gets stuck there. I tried the scroll animation with a simple div block animation too, where I increase it’s width on scroll and it’s still resulting in the same problem.
I checked you project and here is what I want to describe about the scroll trigger/animation.
Scroll trigger works with the element which moves with the scroll. It depends on where the element is in the view, at the top and at the bottom or center; we can also apply some offset.
So for the elements with position: fixed or sticky it will have an issue because technically it will remain at the same position even when we scroll. So if you want to animated an element which has position: fixed or sticky, you should add the trigger/animation to its parent element.
Here I have tried to apply what you said on a lottie animation where the trigger is on the parent element that is a section. I am still facing the same issue and the scroll is jumping the animation to 100% and getting stuck there.
Oh, thank you so much. That seems to have solved it.
But now I am seeing another issue that is the initial scroll gets the animation stuck at 20% and doesn’t go back to 0. So it’s only moving from 20% to 100% in terms of animation.
