"Layer pinned and variable scale"

[pattocheu]

Hello everyone,

 

I'm trying to create layers that scroll over each other with a scaling effect.

I've tried several solutions, and the one in my CodePen works but has some issues.

 

1 - The section #sectionStart is not pinned from the beginning.

 

2 - I want everything to stop when I reach the section #spacer, but my endTrigger doesn't seem to have any effect.

 

The desired effect is in the GIF.

See the Pen PoVxWoj by pattocheu (@pattocheu) on CodePen

[GreenSock]

I noticed a few things: 

1. You're nesting a tween with a ScrollTrigger inside of a timeline that has a ScrollTrigger which is logically impossible - you can't have the playhead being scrubbed by both the scroll position and the parent timeline (they could be going in different directions or at different rates, fighting for control). 
2. You're setting up two ScrollTriggers for each section, and BOTH are trying to pin it. 
3. You're animating (scaling) the same element that you're using as a trigger which is usually a bad idea because it can throw off the intersection calculations. For example, if you shrink an element down to 95% of its normal size in the document flow, that means it'll shift away from the top and bottom (toward the center by default), so now its intersection with the top would change. It's usually best to use a wrapper element as a trigger, and animate the inner element. In this case, you could probably make it work, though, by just setting the transformOrigin to the top so that all the scaling happens with the top edge as the origin (so no shifting away from the top). 
4. Don't use "new" in front of gsap.timeline().

Is this more of what you're looking for?:

See the Pen OJdaozG?editors=1010 by GreenSock (@GreenSock) on CodePen

[pattocheu]

Thank you very much for the prompt response.

Beyond your work on this fantastic library, the support is incredible 🫡

 

I have just updated my code pen to add a blur effect on scroll.

It seems to be working ( on the code pen and on my website), but I'm struggling with the 'Most Common ScrollTrigger Mistakes' related to ScrollTrigger!

Is this code pen valid?

 

My code pen is updated

 

 

Thank you again for your help. Patrick."

[GreenSock]

No, that isn't valid because you've got ScrollTriggers nested inside tweens in a timeline - you can't have a parent timeline controlling the tween's playhead AND the scroll position also controlling it (those could fight). I wonder if you were just trying to do this?: 

See the Pen ExrGKXR?editors=1010 by GreenSock (@GreenSock) on CodePen

 

(separate out the tweens; no need for a timeline)

 

19 minutes ago, pattocheu said:

Beyond your work on this fantastic library, the support is incredible 🫡

💚

[pattocheu]

Thank you for the explanation. 🙏