Scrub Lottie Animation On During GSAP ScrollTrigger
Hey everyone,
I have a ScrollTrigger sequence in which I have several elements animating. I also have a lottie file that I would like to have play at the end of the sequence and still scrub based on scroll position.
Has anyone used a lottie file with scrolltrigger and have any advice on how to best go about this. I haven't found much while searching online and I'm hoping I can avoid recreating the entire lottie animation using divs in Webflow
Thanks so much
4 Replies
Hey @lovebrian649 - GSAP has a helper function for controlling lottie with ScrollTrigger - https://greensock.com/docs/v3/HelperFunctions#lottie
GreenSock
Docs
I still found Webflow's lottie controls to work better though when I build the laptop section in https://www.mosaik.io/ (near the bottom - opening laptop is a lottie but the video is a slider with some gsap animations.)
Mosaik
Meet your digital sidekick. Mosaik is the operating platform for real estate’s most client-centric agents and teams.
what helped A TON from what I remember was using a trigger div as I could easily target that with both Webflow and GSAP. When I used the lottie div itself there were issues with the trigger being off because of position sticky... something like that. I don't remember all the details but making sure that trigger was consistent helped a lot.
the folks in Greensock forum are very friendly and helpful, so they may be able to assist with the helper function if you decide to go that route.
Thanks so much for all the help @Web Bae Really appreciate you sending all this
The more I think about I may just rebuild the scroll sequence in Native Webflow interactions just for lottie controls.