How to play lottie from specific frame

[liflor]

Hello! 

I don't understand how to make animation.

Here is idea:

1) After page load playing some animation

3) After first scroll lottie play from specific frame to the end. This part of timeline should play revers on scroll up.

 

So, may be i need to change html structure? Anyway, I don't have any idea how to implement it in gsap. Is it possible?

See the Pen bGQPgOW by lilyashaZaya (@lilyashaZaya) on CodePen

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[Cassie]

Hi there liflor

 

I struggled to work out what you're needing help with but here are some guesses -

After first/second scroll movement  - ScrollTrigger doesn't have a concept of "first scroll movement", you can use Observer to listen for events and fire off some code. However there are other things here that sound like you may want ScrollTrigger? Maybe a mixture.

I suggest that you take a look at the following demo to see if you're after event driven scroll or normal scrolltriggered animations?

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

 

If that's not what you're after, familiarise yourself with the difference between scrub and toggle actions.

toggleActions will allow you to define how you control an animation at any of the four toggle points. You can play, pause, resume, reverse, complete, restart, reset, or do nothing.

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

Understanding these three different ways to trigger scroll driven animations is key. It'll help you break this down into more manageable tasks.

Hope this helps.

Also, FYI - You're also using old GSAP syntax

//old
const heroTl = new TimelineMax();
//good
let tl = gsap.timeline()

[liflor]

48 minutes ago, GSAP Helper said:

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

Hi! Thank you, I simplified the description and example.

[liflor]

33 minutes ago, Cassie said:

Hi there liflor

 

I struggled to work out what you're needing help with but here are some guesses -

After first/second scroll movement  - ScrollTrigger doesn't have a concept of "first scroll movement", you can use Observer to listen for events and fire off some code. However there are other things here that sound like you may want ScrollTrigger? Maybe a mixture.

I suggest that you take a look at the following demo to see if you're after event driven scroll or normal scrolltriggered animations?

 

 

 

If that's not what you're after, familiarise yourself with the difference between scrub and toggle actions.

toggleActions will allow you to define how you control an animation at any of the four toggle points. You can play, pause, resume, reverse, complete, restart, reset, or do nothing.

 

Understanding these three different ways to trigger scroll driven animations is key. It'll help you break this down into more manageable tasks.

Hope this helps.

Also, FYI - You're also using old GSAP syntax

 

 

//old
const heroTl = new TimelineMax();
//good
let tl = gsap.timeline()

Hello! Thanks for your response! I saw these examples, but I don’t understand how to connect this with lottie. I simplified the description and example, now my main problem is to start the lottie from a specific moment on scroll.

 

[liflor]

OMG! I complicate things, I can use from and to for lottie too 🫠 

 

[Cassie]

Ahaha! Ok, glad you've figured it out. Pop back if you get stuck