Jump to content
GreenSock

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

className - Toggle?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.
×