Jump to content
Search Community

Tween between classes

regiotec test
Moderator Tag

Recommended Posts

Hey Leonardo and welcome to the GreenSock forums! Thanks for being a Business Green member, we couldn't do what do without people like you.

 

We recommend animating the properties that you need animated because tweening between classes isn't very performant, are not explicit, and adding support for them takes a significant amount of kbs for how few people use them. For more information, check out this post:

 

If you are having trouble converting your className tweens into regular tweens, please post and we'll be happy to help :) 

  • Like 1
Link to comment
Share on other sites

thx for the quick response.

 

I have no idea, hot convert the className tweens to regular tweens... (e.g from one shadow definition to another - i use the 24 shadow definitions from Google's Material Design, so how to Tween from shadow layer 1 to layer 16 by just having the classes?)

 

Link to comment
Share on other sites

I'd save the value(s) that you want to animate to in the JS and then animate to them (look ma, no jQuery!)

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

 

You could get the values from the CSS stylesheet if needed but given the limited scope that you shared there's not much of a point in that.

 

Note that I'm using the GSAP 3.2 beta because there was a bug related to animating complex values that has since been fixed.

  • Like 1
Link to comment
Share on other sites

Inspired by your post, I whipped together an unofficial ClassNamePlugin for GSAP 3 which you can see here: 

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

 

Feel free to use that in your projects but it's not something we plan to actively support or promise that it'll work flawlessly in every case. But it should be pretty rock solid for most use cases. 

 

Thanks for being a Club GreenSock member!

  • Like 3
  • Thanks 3
Link to comment
Share on other sites

Hi Jack,

 

very big THX for yout Plugin!!!!! You're my hero!

 

 

On 2/28/2020 at 11:28 PM, GreenSock said:

Inspired by your post, I whipped together an unofficial ClassNamePlugin for GSAP 3 which you can see here: 

 

 

 

Feel free to use that in your projects but it's not something we plan to actively support or promise that it'll work flawlessly in every case. But it should be pretty rock solid for most use cases. 

 

Thanks for being a Club GreenSock member!

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
On 2/26/2020 at 5:54 PM, ZachSaucier said:

Hey Leonardo and welcome to the GreenSock forums! Thanks for being a Business Green member, we couldn't do what do without people like you.

 

We recommend animating the properties that you need animated because tweening between classes isn't very performant, are not explicit, and adding support for them takes a significant amount of kbs for how few people use them. For more information, check out this post:

 

If you are having trouble converting your className tweens into regular tweens, please post and we'll be happy to help :) 

 

 

Dear Zach,

 

i noticed, that with your code the "transform" attribute got lost if i tween between classes. Do You hav any idea?

 

TXH a lot

Link to comment
Share on other sites

  • 9 months later...
On 2/28/2020 at 11:28 PM, GreenSock said:

Inspired by your post, I whipped together an unofficial ClassNamePlugin for GSAP 3 which you can see here: 

 

 

 

Feel free to use that in your projects but it's not something we plan to actively support or promise that it'll work flawlessly in every case. But it should be pretty rock solid for most use cases. 

 

Thanks for being a Club GreenSock member!

 

Thanx a lot - i really missed that feature and this works perfectly for me

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.
×
×
  • Create New...