etheric Posted July 26, 2022 Share Posted July 26, 2022 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 More sharing options...
GreenSock Posted July 27, 2022 Share Posted July 27, 2022 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 More sharing options...
etheric Posted July 27, 2022 Author Share Posted July 27, 2022 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 More sharing options...
Solution akapowl Posted July 27, 2022 Solution Share Posted July 27, 2022 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 3 Link to comment Share on other sites More sharing options...
etheric Posted July 27, 2022 Author Share Posted July 27, 2022 This is exactly want I want. Thank you! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now