Destroy animation if dynamic class exists

[Jamesh]

Hoping someone might be able to help a rookie question! I've enclosed a codepen to illustrate the tabs I have working with GSAP and JS. Everthing is working fine but I'd like the make it possible to not have the animation play when the tab and tab content that have the dynamically added 'active' class to them. Essentially, if a tab is active then when you click on it, it shouldn't animate, otherwise any other tab, if clicked on and is not currently active, should animate. Hope that makes sense!? Thanks in advance.

See the Pen RwWBPGd by jame5 (@jame5) on CodePen

[OSUblake]

If you're adding a class to the active element, then you already know the active element. Just use some simple logic to keep track of stuff and compare.

 

if (lastActiveElement !== activeElement) {
  lastActiveElement = activeElement;
  animate();
}

 

 

 

 

[ZachSaucier]

Hey Jamesh,

 

A few notes:

• Why select the first of your elements and then select all of them? Selecting all of them and then just affecting the first as needed is better.
• If you're going to use some arrow functions you might as well use them more like when you have just one line of code in the forEach.
• To detect if the element has the active class, use .classList.contains("active")
• Instead of looping through all the elements and removing the active class, just select the one that has the active class and remove it.
• It's generally best not to put functions within other functions if you can help it. It's better to move the function outside of the containing function and use parameters if need be.
• It's sometimes handy to attach references to the elements themselves so you can know which one is attached to which.
• Avoid iterating through the same list of elements multiple times to setup things.

Here's how I might set it up using your approach:

See the Pen YzyjyaW?editors=0010 by GreenSock (@GreenSock) on CodePen

[Jamesh]

Thank you for taking the time to run through your thoughts and clearly laying out how you would tackle the task. Really really helpful and very much appreciated. 

[Jamesh]

Back again! I've now been trying to add an effect like shown here 

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

 but I can't get it to work at all! A long shot but if there's any chance you could throw a little more light on how to go about that would be brilliant. My current codepen is here:  Thanks in advance.

[ZachSaucier]

12 minutes ago, Jamesh said:

I can't get it to work at all!

Hey Jamesh. Unfortunately we don't have the capacity to every person with non-GSAP logic. Do you have a specific question? I'm happy to answer those  

[PointC]

2 hours ago, Jamesh said:

I've now been trying to add an effect like shown here 

That's one of mine. I haven't converted it to GSAP 3 yet, but I put quite a few comments in there when I made it.

 

Is there are particular part that you don't understand?

[Jamesh]

Hi Zach. Thanks for coming back to me and completely understand that you can't answer everything (and writing things like 'I cant get it to work at all!' isn't hugely insightful!!). My question would be how to implement PointC's codepen to work with GSAP3 and vanilla JS.

 

Hi Craig. Thank you also for coming back to me and for the inspiration to make animations like your bubble tabs in the codepen. So as you pointed out I think I was struggling with converting to GSAP3. I managed to get pretty far but was failing to implement the targets.index = i;  so the console was giving a warning regarding  if(this.index != activeTab) {  and activeTab = this.index; which I understand is not GSAP per se.  I was just wondering how I would implement the bubble tabs in the codepen I supplied?!

 

 

[PointC]

We just took different approaches to our sliders. You're adding/removing an active class to check the active animation and prevent clicks which is perfectly fine. I prefer to use the index of the targets to accomplish that. You'll see in my loop I have this:

targets[i].index = i;

That's the key to finding out if I'm clicking the currently active tab:

if(this.index != activeTab)

If they don't match, I go ahead with creating a timeline, animating the chosen article and changing the values for old and activeTab.

    old = activeTab;
    activeTab = this.index;

So, to answer your question about using my slider, I think you'd just need to make a slight modification to how you're approaching it. I did just convert that demo to GSAP 3 so that should help.

 

Let me know if you have other questions.

 

[OSUblake]

55 minutes ago, PointC said:

That's the key to finding out if I'm clicking the currently active tab:

if(this.index != activeTab)

If they don't match, I go ahead with creating a timeline, animating the chosen article and changing the values for old and activeTab.

    old = activeTab;
    activeTab = this.index;

So, to answer your question about using my slider, I think you'd just need to make a slight modification to how you're approaching it. I did just convert that demo to GSAP 3 so that should help.

 

Looks like you're doing what I described above. 😉

 

Like I said before, if you're adding an active class to an element, then you already know the active element. There is no need to search for class names.

 

[PointC]

2 minutes ago, OSUblake said:

Looks like you're doing what I described above. 😉

No way man. You copied me since I made that in Sept 2018. 🤣

 

[Jamesh]

All sorted. Thanks for your pointers and help. 👌

 

 

[PointC]

You're welcome. That's how we roll in the GreenSock neighborhood. Let us know if you have any more GSAP problems or questions.

 

Happy tweening.