Pin inner sections elements in horizontal scroll

[etheric]

Hi, guys!

I'm trying to achieve pinning bottom title of each section in horizontal scroll until section rich screen right side. Can't calculate correct end value for first section title and start/end for second section title.

See the Pen NWYvQOb?editors=1111 by maks_kv (@maks_kv) on CodePen

[GreenSock]

Welcome to the forums, @etheric. 

 

Are you trying to "pin" something that's inside the part that's moving horizontally? If so, that is not possible. Well, you could sorta fake it by animating the "x" in the opposite direction, but it's not trivial because you'd need to calculate the distance which would likely change based on the width of the viewport. Basically, it's not officially supported. 

 

But if you just want an element that's scrolling vertically to stop (get pinned) while another section (which may be right behind it) is moving horizontally, that should be doable, yes. You'd just need to build your markup so that it's not INSIDE the horizontally-moving section. 

[etheric]

I want to fake it by animating x, as you can see in the demo, x value is calculated correctly, titles are stopping exactly at the end of sections. But the problem here are start and end properties. Also for the second section I can't just use ".horizontal-scroll" trigger with this start value (which is correct to me) because it's not getting triggered. 

[akapowl]

Hello @etheric

I suggest having a look at containerAnimation, which will make it much easier to trigger things within a fake-horizontal scenario as such
 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

 

 

On a different note:  While you have invalidateOnRefresh in there, your setup will not react to resizing because you never re-populate/update the variables that you use in your ScrollTriggers, so they will always contain the values that you fed them with initially. You might want to consider changing that. Either update your variables on resize or just get the values neccessary directly in ScrollTrigger. I'll leave that up to you though.

Here's a pen showing what I understood you want to achieve with regard to the fake-pinning. I hope it will help.

See the Pen xxWXPmd?editors=1010 by akapowl (@akapowl) on CodePen

[etheric]

This is exactly want I want. Thank you!