ScrollTrigger with multiples elements and Motionpath

[lgo]

Hello guys,

 

I would like to ask for your help about one animation I'm trying to do. The concept is the one you can see with the CodePen. But of course, I don't want to have the three "container-information" to overlay each other. I want the second container to begin his animation after the first one reach 0.6 of the path, same for third. That's why I tried to do my function with onComplete attributes but it's not working. I tried several things with delay too with timeline (delay works but container overlay at each step of the timeline), or to change the start of ScrollTrigger with dynamics var (it causes each animation to begin when the previous entire timeline finishes), so it did not work as I expected.

 

I hope my code is not too bad ( not a very good JS dev ^^' ) and you will see the animation I want to have.

 

Thanks a lot for your help

 

PS : I had one more question, when I scroll to top, if I scroll too fast, the window is scrolling when my wrapper is not pin anymore. This causes a my "container-information" to scroll like in normal window. Is there a solution for this ? Thanks again !

See the Pen OJmZeGE by gregoiredeclic (@gregoiredeclic) on CodePen

Edited July 31, 2021 by lgo
forget one question

[GreenSock]

I'm not sure I really understand what you're after, but here's my guess: 

See the Pen MWmXeeq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I used a function-based value for the motionPath so that it returns a different start/end based on which target it is. Much simpler code. 

 

As for it becoming unpinned when scrolling up quickly, that's the correct behavior. You've got a scrub applied to the animation, so it takes a second to "catch up", of course. You can't have it both ways - either you can have it perfectly synchronized with the scroll position (scrub: true) -OR- you can have the smoothed effect of a numeric scrub (scrub: 1). 

 

Does that help? 

[lgo]

Hi,

Thanks a lot for your answer. Unfortunately, this is not really what I was looking for. I would like to have the same animation with the same path for the three container, but I want the second to begin (same place as the first one begin) when the first one is at 60% of the path and the third begin when the second one is at 60% of the path.

Please tell me if it's not clear.

Thanks again for your help

[mikel]

Hey @lgo,

 

That´s a job for stagger.

 

See the Pen XWRYVoM by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[lgo]

Thanks guys