ScrollTrigger - Pinning child element after parent has been pinned

[jimjiminyjimjim]

I might be misunderstanding something about scrollTrigger plugin. In this example, I'd like to pin a child element to the top of the screen as its parent leaves. I can see that the event triggers, but the fixed style doesn't seem to lock the element to the viewport?

 

How best should I achieve this?

See the Pen poePJxj by jimjiminyjimjim (@jimjiminyjimjim) on CodePen

[elegantseagulls]

It's not working because the parent is being transformed so then the child element looses it's fixed-position context. Adding pinReparent: true, to the child element's ScrollTrigger should fix this, (you'll want to be careful when using this as you'll loose descendant styling, if applicable). More on this here: https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

[jimjiminyjimjim]

Ah - that sorts it out. Thank you!

 

Is there a better way of doing this without the reparenting?  The marker doesn't have to be a child, as long as it can stay centered while it scrolls into view.

[elegantseagulls]

It'll work just fine as long as the parent doesn't have a transform applied to it, which is what causes it to loose it's position: fixed; context (a CSS/browser issue).