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.

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!

Awesome - thanks for pointing that out!

Hello. I have an animation where I've used autoAlpha to keep things hidden until the animation starts. The animation is supposed to play three times after loading. On Mac, it's visible in Firefox but not Chrome or Safari. What do I have wired up incorrectly? I'm realtively new to GSAP so I'm not sure what is causing the issue. Any insight is appreciated.

Thanks again Craig - I really appreciate your help with this. It's getting closer Here's an image of what tab module will look like. I'll be putting an animation into each tab. The first tab - Speakers, will play when the tab module scrolls into view (I'll figure that out later) and the other two animations will be paused in their respective tabs. Clicking a tab will activate that animation and pause the other animations. Clicking back into a tab will restart that animation. I've put together a code pen down below. The part I don't understand is how to have the looping part of the animations (boxTimeline) start only after the background has loaded (wrapTimeline). The background should fade up and the looping bits appear and animate.

Yes! That is exactly what I was trying to get to. Thank you for that. Now I'm trying to gain some control over when the animations start. Eventually, I'll have 3 different animations on one page but I will only want one to play at a time. Each animation will be hidden in a tab module and then you click the tab heading, that tab will be active and the animation will start. What I would like is for the background of each item to fade in and scale up and then the looping animation will start. With the way I currently have it set up I cannot get that to happen. I have it working on the Microphone animation but I don't understand how to apply that to the other two animations. I've set up a code pen with an example of how it will be set up. I've removed the tab functionality as I try to get the stop/start buttons working. I'm very new to GSAP so I'm sure there are some improvements to be made - any help or insight is appreciated. https://codepen.io/OddboxStudio/pen/WmEqQB

Hi there - new to GS and this is my first post - thanks for reading. I'm doing some product feature walk-throughs where we're trying to communicate the different parts of a wall mounted speaker. This animation is supposed to show the sound waves emanating from the front speakers. I found some code that produces the effect I need and I've had some luck getting things to work but I need to sync the speakers so they appear to play in stereo. The right speaker always starts late and in never synced to the left speaker. I understand this is due to the time it takes to scan the HTML file and find all the instances of '.pulse'. Is there a way to get the animations to play at the same time? I've tried a few things but nothing has worked (with my limited JS coding skills) Any insight or suggestions are welcomed. Thanks!