Clicking Tab in GSAP Moves Other Tabbed Content

[MrCapp]

Hello there. I'm using a copy of an animation from @PointC to display some content in a page.

The animations and everything have been working fine but I've run into an issue now that I've moved that content into a page with other things that have Javascript as well.

Each time I click the tabs in the GSAP modue, the indicators in the older - non-GSAP - version of the same module move as well. When I click Simple setup on the top module, both the blue & grey indicators move.

I suspect it's obvious to someone with more Javascript experience but I'm not that guy so I'm scratching my head on how to fix it.

I think it has something to do with using this.index and not being specific enough with naming to make sure that clicking the tabs in the GSAP module does not  affect content in other modules. What can I change in the Codepen to make sure I'm only affecting that content?

Any suggestions would be greatly appreciated!

See the Pen oNdjmJP by OddboxStudio (@OddboxStudio) on CodePen

[Rodrigo]

Hi @MrCapp,

 

Unfortunately you forked Craig's codepen and didn't change anything on it. We can't help you identify your problem without a live editable sample that we can look at.

 

For your comments I can gather that you might have some conflicts with some classes and selectors, so take a good look at that and if possible create a reduced codepen that shows exactly the issue you're running into.

 

Happy Tweening!!!

[MrCapp]

Thanks for the suggestion Rodrigo. I took your advice and built out a Codepen to demo the problem and once I did I was able to see the issue. It was easier to pinpoint once I paired things down to just the modules that I was having problems with.