Pinned animation inside layered panel

[scavaliere]

Hello everyone, 
I'm trying to use layered pinned section animation with some animations in it. 
As the codepen attached, I'm trying to: 

- scroll
- pin to blue section
- activate animation on the main h1 title with scrub
- pin the animation till the end of the section 

All this keeping the layered animation. I have made a test but the next panel starts to overlay before the animation is finished and pinning the animation inside makes the section flickering and disappearing.

Any ideas? 

Thank you!

See the Pen wvXbrEm by scavaliere (@scavaliere) on CodePen

[akapowl]

 

Hello @scavaliere.

 

Try thinking about what is currently happening and what needs to happen from a logical point of view for it to work like you intend (I simplified the duration of your tween a bit for my explanation to last 100% of the window's height to make it a bit easier to grasp).

 

What IS happening now:

• you start pinning the blue section when its bottom hits the bottom of the viewport
• since you don't define a specific end it will default to 'bottom top', which makes the duration of your pinning equal to 100% of the window's height
• since for this overlaying effect pinSpacing is needed to be false, the red panel comes scrolling in immediately

 

What NEEDS to happen:

• you will need to double up the duration, the blue panel gets pinned, so instead of 100% you will need it to last 200% of the window's height; i.e. 100% for your animation to happen where the blue panel shouldn't get overlapped and 100% for the overlapping part. For this to work only for the blue panel you can set the end via a ternary operator similar to like what is being done for the pin property in your example.
• since you don't want the red panel to come in scrolling immediately, you need to offset it with regard to its (y-axis) positioning on the page; e.g. via putting a margin-top on it equal to the distance your initial tweens is being scrubbed over; which in my example is 100% of the window's height, so 100vh

 

Also, on a different note:

• start: "-=300" as you have it on your tween's tl is not valid - ScrollTrigger starts can not be relative values like that.
• you don't need to specifically set pin to false - that is the default for SrollTriggers anyway
• I think the way you have set up the tweens of that timeline does not work as you might expect. You have two tweens on there, which both will take half of the duration of the ScrollTriggers's distance, and that first tween (the .from() one) actually does nothing - you are essentially tweening from x: 0 to x: 0 there. Maybe you wanted to actually use a .fromTo() tween instead of those two seperate tweens? I'd suggest looking that up in the docs again.

 

All that considered, things should already work a lot more like you had in mind - at least that's what I understood you wanted to go for.

 

Hope it helps - happy tweening!

 

See the Pen MWXdOVa by akapowl (@akapowl) on CodePen