TimelineMax multiple className bug

[Remco]

Hi there,

 

I'm building a custom collapse navigation. See codepen: 

 

The 'nav' element needs to toggle two classNames. If its collapsed (by click), and if its animating(by timeline). Some how, the 'collapsed' class will not be removed if you close the navigation. If i remove the +=animating classnames in the timeline, it will work..

 

Of course, i can rebuild the HTML and toggle the className on another element to fix this issue, but i dont want that 

 

Does anyone has the same issue and is there a simple fix?

See the Pen GZKmaR by anon (@anon) on CodePen

[Dipscom]

Hi Remco,

 

Welcome to the forums!

 

From what I saw, it was just a matter of organising your logic a little bit more. You want the 'collapsed' class to be added at the end of the animation and removed when the tween completes reversing. So, just add that to the timeline constructor object. See the bellow fork of your example:

 

See the Pen oxvwLr?editors=0010 by dipscom (@dipscom) on CodePen

[Remco]

Hi Dipscom,

 

That does work. Thanks! Can you also explain why my version doesnt work? So if you put the className toggle on a clickEvent (and outside the timeline)? It looks like its overwriting the other. Although im using -= and += so it shouldnt happen.. 

 

Thanks again

[Dipscom]

Yes, your conclusion is correct. It is overwriting. It kind of makes sense when you think about it. Because, you are tweening the class name, not a particular numerical property.

 

What I saw wrong in your code (which, by the way, might not be the real reason) was the fact that you were tweening the same property at the same time and Greensock automatically handles overwriting but at the end of the day, it is just a piece of logic, not quite psychic (yet) although a rather clever one.

 

Let me elaborate:

 

In your timeline you were setting the animation class on and off:

_navTween.set('nav', {className:'+=animating'});
_navTween.staggerFrom('nav li', 0.5, {opacity:0}, 0.1);
_navTween.set('nav', {className:'-=animating'});

 

Then, on your click handles, you were also trying to modify the className attribute, while at the same time, triggering the timeline:

 

function openNav() {
  _navTween.timeScale(1).seek(0).play();
  TweenMax.set('nav', {className:'+=collapsed'});
};
  
function closeNav() {
  _navTween.timeScale(2.5).reverse();
  TweenMax.set('nav', {className:'-=collapsed'});
};

 

So, when playing the timeline forward, two new class names were being added but in reversing, one was being added and one being removed and thus, triggering GreenSock's overwrite logic. 

 

If you were to click again, after the tween is finished, you will see that it collapses.

 

So, the solution to this particular case, is to change the class names in order, one after another, rather than all in one go.