search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.59k stars 2.88k forks source link

Question: Is there a way to animate the Lottie (json file) with scroll from frame to frame? #2595

Open tiagogda opened 3 years ago

tiagogda commented 3 years ago

Hello there! I did an animation much like this one https://www.samsung.com/uk/smartphones/galaxy-z-foldable/ I would like to know if its possible to say that when the user scrolls down one time or even multilple times(like scrolling fast) it goes to frame X, then the user scrolls again, goes to frame Y, and so on?

What's happing now is that if we scroll really fast it just goes on without actually stoping. Would like to control where the user stops at, just like the animation we can see on the Samsung site above.

bodymovin commented 3 years ago

hi, there are certain libraries that handle attaching scrolling events to certain behavior. Perhaps you can take a look at the GSAP Scroll Trigger library? https://greensock.com/forums/topic/24416-scroll-based-animation-using-gsap-3-lottie-web-and-scrolltrigger/