Native Webflow Tabs + GSAP ScrollTrigger
Has anyone ever mixed native Webflow tabs with scrolltrigger? It seems to only work for me on the tab that I have set to default on page load. So if I publish with tab 1 set to default, all the tweens work for that. If tab2 is set to default, the tweens work for that one.
However, when I click on the other tab, the content never animates, it just stays invisible.
To give you an idea of what I have going on. I have a tabs component with two tabs and then content below that each require the user to scroll down to see everything.
Hoping someone has encountered this before? Kind of drawing a blank on how to solve for this
4 Replies
do you have a live site or example to share?
I used gsap to animate elements within tabs but not with scroll triggers
Are you looking to swap content on scroll?
is it sticky?
I have a few demos I can send you
Here's a demo of scroll swap I've been working with. Not a tabs component though!
just testing different build variations which is why you see all the craziness haha
@Web Bae so sorry for the late response..had something come up.
its a normal webflow tabs but each tab content has a lot of content so each tab would require the user to scroll down to see everything in that specific tab. I'm just looking for something simple where the elements of each tab animate in subtly as the user scrolls down in each tab
the more I think about it, the more I think the native webflow tabs component is making it trickier than it is so part of me thinks I should just rebuild it using divs and just emulate the tabs functionality