kobro Posted August 7, 2021 Share Posted August 7, 2021 Hi. Is there any way to control lottie animation in gsap timeline? For example, add lottie between these animations. tl .from(".card1", {y: '-200vh', rotation: 180}) //Animate lottie here while scrolling into trigger view like: //.to("#myLottie", {lottiePlayback: 100%}) .from(".card2", {y: '-200vh', rotation: 180}) .from(".card3", {y: '-200vh', rotation: 180}) Like in Webflow there is a feature to control lottie in timeline. I have already tried with ScrollLottie plugin and read a lot of topics about it but I didn't find how to do it. All solutions do not insert in the timeline that exist. See the Pen LYyXEjY by KoBro (@KoBro) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 7, 2021 Share Posted August 7, 2021 Hi there @kobro This thread may help! Let us know if the solutions here aren't what you're after. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 7, 2021 Solution Share Posted August 7, 2021 Don't forget to wait until the Lottie file has loaded so that you can figure out how many frames there are. That way, you can plug it into your tween. Here's an example: See the Pen zYwMoWB?editors=0010 by GreenSock (@GreenSock) on CodePen Good luck! 1 2 Link to comment Share on other sites More sharing options...
kobro Posted August 8, 2021 Author Share Posted August 8, 2021 8 hours ago, GreenSock said: Don't forget to wait until the Lottie file has loaded so that you can figure out how many frames there are. That way, you can plug it into your tween. Thank you very much for the example you made. It is exactly what I was looking for. Link to comment Share on other sites More sharing options...
Abhishek Animates Posted July 10, 2023 Share Posted July 10, 2023 See the Pen XWyzZQW by abhiishek-10 (@abhiishek-10) on CodePen I am trying to map progress of my lottie with a certain section. When a section comes into view lottie progress should be 25%, then second section come and lottie progress should be 50% and so on. I tried but couldn't achieve the result I wanted. How can I keep the lottie pinned and still map progress with different sections??? Please Help 🫠 Link to comment Share on other sites More sharing options...
Rodrigo Posted July 10, 2023 Share Posted July 10, 2023 Hi @Abhishek Animates, Maybe something like this: See the Pen bGQYjBO by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Abhishek Animates Posted July 11, 2023 Share Posted July 11, 2023 11 hours ago, Rodrigo said: Hi @Abhishek Animates, Maybe something like this: Hopefully this helps. Happy Tweening! Yes I've tried this method before what I've currently in my pen. But I actually want to find a way of linking lottie's progress to a certain section. For example, when section-2 reaches center of the screen, the lottie should've completed 25% of it's animation frames. And also I want this percentage value to be customizable according to which sections will come in viewport. Link to comment Share on other sites More sharing options...
GreenSock Posted July 11, 2023 Share Posted July 11, 2023 That's a pretty customized thing - here's a quick attempt that might get you going in the right direction: See the Pen zYMPVor?editors=0010 by GreenSock (@GreenSock) on CodePen I added a data-progress on each <div> to make it easy, and then populate a timeline according to the height ratios. If you need further customization, you're welcome to contact us about paid consulting services (it's a bit out of scope for these free forums). Good luck! 2 Link to comment Share on other sites More sharing options...
Abhishek Animates Posted July 11, 2023 Share Posted July 11, 2023 9 minutes ago, GreenSock said: That's a pretty customized thing - here's a quick attempt that might get you going in the right direction: I added a data-progress on each <div> to make it easy, and then populate a timeline according to the height ratios. If you need further customization, you're welcome to contact us about paid consulting services (it's a bit out of scope for these free forums). Good luck! That's exactly what I was trying to solve. Thank you so much!!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now