Jump to content
GreenSock

Remco

TimelineMax multiple className bug

Recommended Posts

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  8-)

 

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

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×