Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Pin inner sections elements in horizontal scroll

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

This is exactly want I want. Thank you! 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.