Jump to content


Tab Carousel Content Switch

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to build a tab slider that has three list items, and three associated copy block + icon. Overall...I'm not really sure where to start on this either. Ideally, when you click a different list item, it switches the content and icon to the correlating tab item and makes the List Item 100% opacity. Screenshot reference attached. 


I started getting the Tab "on click" working to switch with add/remove class for opacity, but when I try animating it to fade it just changes both of them.

Thoughts on this?

Screen Shot 2018-03-21 at 8.30.21 PM.png

See the Pen mxmmvq by nmarketti (@nmarketti) on CodePen

Link to comment
Share on other sites



Was able to get the tab click and fade working. But still struggling to link the tab to fade out their correlated content.

Link to comment
Share on other sites

In your example you are trying to get 'content' attribute but I think you are trying to retrieve text of your li tags. You can do that using text method of jQuery. To use it to Tween, you need additional class to your tabs, like contentOne, contentTwo.


See the Pen eMWKPw?editors=0010 by Sahil89 (@Sahil89) on CodePen


Though your example is way too complex, you can simplify it as follows,


See the Pen rdmKKE?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 4
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.