ScrollTrigger Layered Pinned with animations inside

[djdnl13]

Hi there, 

 

I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger. I mean the run some animations inside the first section, finish this animations and then animate the overlap transition to the next section. The same with all the following sections.

I'm kind of new in these animations and couldn't find more examples to try. I was trying with disable method on ScrollTrigger but nothing so far.

Thanks in advance.

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

[akapowl]

 

Welcome to the forum @djdnl13

 

5 hours ago, djdnl13 said:

I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger.

 

Sure, there are actually multiple approches you could use.

Here is one example that makes the whole thing a timeline.

 

You'd probably want to read up on how durations and the position paremeter work with tweens/timelines that have a ScrollTrigger with scrub applied to tweek everything to your liking.

 

I also added some non scrubbing animations on the header in the top left corner, calculating when to trigger them based on the body as the trigger, triggering when each of the panels hits the top. Hope this is a bit helpful.

 

See the Pen 5d5c54eb5dd09c9a4322f108b8708acb by akapowl (@akapowl) on CodePen

 

[djdnl13]

Thanks @akapowl !

This is the solution, I will read the link to have everything clear.

 

Daniel