Correct animation order

[UwetU]

Hello guys, can you please tell me how can I make all my animations follow a certain order of adding to the main timeline? Because now the first and second functions are executed simultaneously, I can't figure out how to universally set the beginning of a new trigger to the end of the previous one?
P.S. Thanks a lot in advance

See the Pen gOWOryR by uwetu (@uwetu) on CodePen

[Cassie]

Hi there!

I'm a little confused looking at your code. It looks like you're trying to use a master timeline, (which would order animations based on time and position parameters) but the animations being nested are being controlled by scrolltrigger - (which will play when scrolled to certain point down the page.)

You can't have both - it's a logical impossibility.

What is it you're trying to achieve?

- A sequence of animations ordered on a timeline (maybe triggered by an initial scroll?) 

or

- Separate scroll animations that play as you hit certain points down the page.

 

[UwetU]

Cassie, thanks for your reply. Yes, for sure there is no need to be the main scrolltrigger, but somehow I need to fix the main container and at the same time play certain animations on the panels only at the moment when the panel appears on the screen

[Cassie]

Ok so first up let's strip out everything. 

That codepen had an external stylesheet linked so you can't actually see the styling. It was also setting all the panels to position absolute, which was great for the original purpose of the pen - but not for yours. The page didn't actually scroll, which was going to make your life harder!

Scroll animations are mainly about the markup and the styles to be honest! Get a good base sorted first.

Here.  Starting point, no JS - see how it scrolls now.

See the Pen 63b344ab93b0b4f6be18750e3615a9d5?editors=0010 by cassie-codes (@cassie-codes) on CodePen

[Cassie]

Now we can add some timelines in that are triggered *when* we hit those sections.

See the Pen 63b344ab93b0b4f6be18750e3615a9d5?editors=0010 by cassie-codes (@cassie-codes) on CodePen

You can pin those sections using pin:true

You can also add animations to those timelines.

And lastly, choose whether the animation plays through based on durations and position parameters or whether it's tied to the scroll duration. Note the difference between the first timeline and the second.

this is controlled with scrub: true

[UwetU]

Cassie, thank you very much for your answers, but I understand how to make an animation if the panels are located strictly after each other, I would like to understand how to make a sequential animation, but then get the effect of the appearance of a slide from under another, for example, with a slight displacement along the y axis, as soon as you start  using the transform property, it becomes unclear how to calculate the end of the first animation and the beginning of the second, since the scrolltriggers are defined without offset

[Cassie]

Ok, so same deal.

See the Pen 966c37d2b9f1205d40379f707eff813e?editors=1011 by cassie-codes (@cassie-codes) on CodePen

You can pin the sections and remove pinSpacing to create that effect - you don't have to actually position them on top of each other with position absolute!

Then you can keep the separate timelines to control animations as those sections come into view.

Is this what you're after? 

[UwetU]

Cassie, yes, this is closer to what I wanted, but how to make it so that we have the effect of pinSpacing false, but at the same time that the panels go up or appear from under the current panel only at the end of its animation?  And I would like to be able to make different transitions between panels, is this even possible?

[Cassie]

Yep, all of this is definitely possible. Have you taken a look at the scrollTrigger docs?

Why don't you take the example I've given you, take a little read over the docs and give it a bash? Break what you're trying to achieve into small steps and work on each one at a time.

Feel free to post your workings with more specific questions - we're here to help but unfortunately don't have the resources for free consulting!

[UwetU]

Cassie, yes i understand, thanks a lot for your help !!!