Lottie animation in timeline

[kobro]

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

[Cassie]

Hi there @kobro

This thread may help!
 

Let us know if the solutions here aren't what you're after.

[GreenSock]

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!

[kobro]

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.

[Abhishek Animates]

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 🫠

[Rodrigo]

Hi @Abhishek Animates,

 

Maybe something like this:

See the Pen bGQYjBO by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Abhishek Animates]

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.

[GreenSock]

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!

[Abhishek Animates]

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!!!