Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kez1304

className - Toggle?

Recommended Posts

Hi guys,

 

Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute?

 

 

I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly.

className: '-=responsive-example_small'

This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation.

 

I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain.

 

Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')?

 

If not, is it a possibility for the future?

 

 

Thanks a lot! :)

Link to comment
Share on other sites

Hi kez1304  :)

 

I don't know why it wouldn't work on reverse. Without a CodePen it's a hard to troubleshoot.

 

Here's a simple example of the timeline reversing after removing a class on play() and it all works correctly.

 

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

 

Without seeing the problem, I'm not sure what else we can offer you for a solution.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Ok.

 

I see my problem now, I'm invalidate()-ing the timeline before I reverse it, which is destroying the link I assume...

 

Is there any way around this?

Link to comment
Share on other sites

We'd have to see why you're animating via a class change rather than animating the properties in the tween and the reason for the invalidate(). 

 

Feel free to fork my pen from above and recreate a simplified version of the problem you're experiencing. Without code and a desired behavior, it's tough to give the best advice.

 

Happy tweening.

:)

  • Like 3
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.
×