Sync stereo speaker pulse animation

[MrCapp]

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!

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

[PointC]

Hi @MrCapp 

 

Welcome to the forum.

 

If I understand your desired outcome correctly, I'd probably just separate the targets. Maybe something like this:

 

See the Pen NJjQEz by PointC (@PointC) on CodePen

Dos that help? Happy tweening.

 

[MrCapp]

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.

 

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

[PointC]

There are a few things to look at here. We can take them in small bites. The first thing to understand is creating multiple timelines in a loop and controlling them all at once. Right now you're clicking on speakers and trying clear the processing timeline while restarting the tlSpeaker timeline. (tlSpeaker doesn't actually exist, but that's a separate matter).

 

When you create a whole bunch of timelines with the same name in a loop, they'll play just fine, but controlling the group as a whole requires a small change in what you're doing. Take a look at this example:

See the Pen xBXbjM by PointC (@PointC) on CodePen

You can see that I loop through and create a timeline for each box. Now, press the play/pause button and you'll see that it only controls the last timeline from the loop. That's how you currently have your setup working and not what you want here.

 

Now take a look at this one:

See the Pen YgrPgX by PointC (@PointC) on CodePen

 

It's similar, but now we loop through to create the timelines and add them to a master timeline. I also used the position parameter when adding the nested timelines to the master. You can see that the play/pause button now controls the master box timeline. Make sense?

 

The other part (fade in) is certainly doable. My question would be do you have to click to close each one or does opening a new animation automatically fade out and close the active one?

 

Hopefully the above demos help with creating the master timelines. Feel free to post the next part of your progress and I'll help you from there. Happy tweening.

 

[MrCapp]

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.

 

 

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

 

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.

 

[PointC]

There would be a variety of ways to make that happen. The simple approach would be to add the boxTimeline to the wrapTimeline. Something like this:

 

See the Pen moqrxN by PointC (@PointC) on CodePen

So what this does is create box timelines in a loop which are nested as children of the boxTimeline and then the boxTimeline is a child of the wrapTimeline. The wrap is now the master of all the timelines so you don't need to play() the box timeline. Make sense?

 

Nesting timelines is a great way to work. We're kinda taking the brute force route here and I don't want to throw too much at you, but this is a fantastic resource about creating timelines in functions and returning them to the master. 

https://css-tricks.com/writing-smarter-animation-code/

 

You'll only have three timelines in your project so manually making everything is not really a big deal, but when you get into complex situations with lots or repeating code and tons of timelines, creating everything in functions makes your life easier.

 

Hopefully that all makes sense. If it's not clear, please let me know.

 

Happy tweening.