regiotec Posted February 26, 2020 Share Posted February 26, 2020 Hi happy tweeners, GSAP V3 doesn't support tweening between classes anymore. Is there workaround? I tried to include TweenMax V2.x.x and use the "TweenMax"-prefix. But no chance TXH for your help... See the Pen gOpmKJN by Leonardo666 (@Leonardo666) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 26, 2020 Share Posted February 26, 2020 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 1 Link to comment Share on other sites More sharing options...
regiotec Posted February 26, 2020 Author Share Posted February 26, 2020 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 More sharing options...
ZachSaucier Posted February 26, 2020 Share Posted February 26, 2020 Can you please try to create a minimal demo of your current animation using GSAP 2? This thread gives more description on how to do so: Then we can help you figure out an intelligent way to animate to those values. Link to comment Share on other sites More sharing options...
regiotec Posted February 26, 2020 Author Share Posted February 26, 2020 added codepen demo... Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 26, 2020 Share Posted February 26, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 28, 2020 Share Posted February 28, 2020 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! 3 3 Link to comment Share on other sites More sharing options...
regiotec Posted March 6, 2020 Author Share Posted March 6, 2020 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! 1 Link to comment Share on other sites More sharing options...
regiotec Posted March 16, 2020 Author Share Posted March 16, 2020 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 More sharing options...
ZachSaucier Posted March 16, 2020 Share Posted March 16, 2020 Can you please create a minimal demo (maybe in CodePen?) showing your approach and the issue? It's pretty hard for us to help blindly. Link to comment Share on other sites More sharing options...
Ansgar Posted December 30, 2020 Share Posted December 30, 2020 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 More sharing options...
lahisir Posted December 31, 2020 Share Posted December 31, 2020 I want to create an endless star rain animation, all stars are SVG. The process of repetition is not smooth at all.Is there any JS or GSAP solution to make the animation smooth? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 31, 2020 Share Posted December 31, 2020 @lahisir With more than a few elements you're going to have performance issues animating SVG like that. You'll get significantly better performance if you use Canvas for that sort of thing. As for the "smoothness" you'll have to create a minimal demo of what you're talking about because the issue could be a plethora of things. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now