Changing the direction of interaction
Hi guys, I don't know the code very well and I'm having a lot of problems modifying this case (https://www.youtube.com/watch?v=rFUNxuHgK1U&t=290s) to change the interaction from vertical to horizontal.
I've tried for a long time and still can't get the correct animation, any help is greatly appreciated, thanks!
Web Bae
YouTube
Sticky Scroll CMS Tabs with GSAP ScrollTrigger
Here's how to make Sticky Tabs with GSAP ScrollTrigger in Webflow - all connected to CMS. The trick is in a little bit of DOM manipulation to take advantage of flexbox on our CMS list element.
// CLONE IT (affiliate link)
👯♂️ https://try.webflow.com/cloneable-is-bae?sub1=scrolltrigger-sticky-tabs
// RESOURCES
🌶 Code Boost: https://www.webbae....
3 Replies
the new typographic layout is shown in the image, the first tabs are 100vh wide, and as you scroll horizontally the other tabs-top then stops to the right of the first one.
@zhizhi599 cool idea! It would take me some time to work this one out I think. Check out the
containerAnimation property for scrollTrigger. https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#containerAnimationScrollTrigger | GSAP | Docs & Learning
ScrollTrigger enables anyone to create jaw-dropping scroll-based animations with minimal code. Infinitely flexible. Scrub, pin, snap, or just trigger anything scroll-related, even if it has nothing to do with animation.
Thank you very much for the link. I will do some studying and try to attempt to make it.