Marten002 Posted November 17, 2019 Share Posted November 17, 2019 TweenMax.to(searchBlock, 1, { css:{ className: '+= nav__search--active' }, delay: 1.5, }); this code is not working, but in v. 2.1.3 it is work! Help me pls. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 17, 2019 Share Posted November 17, 2019 Yes, as mentioned in the release notes, GSAP 3 doesn't support className tweens because they're just generally a bad idea in most cases: From a performance perspective, they require looping through every single CSS property available to find which ones change between the start and end, and then isolating those for the tween. It's just a lot of work that could be avoided by simply being explicit with your animations about which properties you want to animate. From a code perspective, being explicit about which properties you're animating helps to make your code more maintainable and aids in troubleshooting/readability. Dropping className support saves valuable kb in the engine. We may consider a separate ClassNamePlugin down the road if there's enough demand from users, but I think it's better in most cases to just nudge users toward writing cleaner animation code that doesn't rely on things being defined in CSS. If you have a certain use case that helps make the case for a ClassNamePlugin, definitely let us know. If you just want to add a class at the end of an animation or something, that's easy to do in an onComplete callback. And of course you can use simple CSS transitions if you're looking for basic CSS state changes. 3 1 Link to comment Share on other sites More sharing options...
Torrfura Posted November 19, 2019 Share Posted November 19, 2019 I often use classnames to keep styling and code separated. In my case, I work with a company that has many sub brands, with unique theming etc defined as less variables. I find it useful to set a class, retrieve certain properties such as colors etc, then remove it and animate towards these values. It is no problem doing this with a .call() in a timeline for example, and just use classList. But I found it very handy at times atleast. Link to comment Share on other sites More sharing options...
anteksiler Posted November 20, 2019 Share Posted November 20, 2019 On 11/17/2019 at 8:07 PM, GreenSock said: Yes, as mentioned in the release notes, GSAP 3 doesn't support className tweens because they're just generally a bad idea in most cases: From a performance perspective, they require looping through every single CSS property available to find which ones change between the start and end, and then isolating those for the tween. It's just a lot of work that could be avoided by simply being explicit with your animations about which properties you want to animate. From a code perspective, being explicit about which properties you're animating helps to make your code more maintainable and aids in troubleshooting/readability. Dropping className support saves valuable kb in the engine. We may consider a separate ClassNamePlugin down the road if there's enough demand from users, but I think it's better in most cases to just nudge users toward writing cleaner animation code that doesn't rely on things being defined in CSS. If you have a certain use case that helps make the case for a ClassNamePlugin, definitely let us know. If you just want to add a class at the end of an animation or something, that's easy to do in an onComplete callback. And of course you can use simple CSS transitions if you're looking for basic CSS state changes. As far as I can see, just adding classes is not working either: tl.set( search_window, { className: '+=search-active' } , "start") It replaces all the classes even though "+=" is used. Link to comment Share on other sites More sharing options...
OSUblake Posted November 20, 2019 Share Posted November 20, 2019 It seems to work with the beta version. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js See the Pen 532af89fca0e60b5706feae404cbd804 by osublake (@osublake) on CodePen But you can't use "+=" or "-=" as it's literally changing the className property of an element. 3 Link to comment Share on other sites More sharing options...
Hil Posted December 8, 2019 Share Posted December 8, 2019 On 11/17/2019 at 4:29 PM, Marten002 said: TweenMax.to(searchBlock, 1, { css:{ className: '+= nav__search--active' }, delay: 1.5, }); this code is not working, but in v. 2.1.3 it is work! Help me pls. Here is an easy work around function toggleClass(s,n) { $(s).toggleClass(n); } .call(toggleClass, [searchBlock, "nav__search--active"],"+=1.5") Link to comment Share on other sites More sharing options...
anteksiler Posted January 3, 2020 Share Posted January 3, 2020 On 12/8/2019 at 8:32 AM, Hil said: Here is an easy work around function toggleClass(s,n) { $(s).toggleClass(n); } .call(toggleClass, [searchBlock, "nav__search--active"],"+=1.5") This method is not working for me because call is trigger twice when using timeline. Link to comment Share on other sites More sharing options...
GreenSock Posted January 4, 2020 Share Posted January 4, 2020 9 hours ago, anteksiler said: This method is not working for me because call is trigger twice when using timeline. Can you provide a simple codepen that demonstrates the problem please? I'd love to see the issue in context. Are you saying that you think call() is invoked twice when it should only be invoked once? 1 Link to comment Share on other sites More sharing options...
Kozo Posted February 4, 2020 Share Posted February 4, 2020 Glad I found this thread! So I've started using tailwindcss and I'd prefer to interpolate with their provided classes like .bg-red-400 and .bg-blue-700 for consistency and not 'caring' what those colors are defined as in configuration. Link to comment Share on other sites More sharing options...
gmullinix Posted February 4, 2020 Share Posted February 4, 2020 I would also like to see this feature come back. There are certain cases where it's better to keep the css styling separate, and use gsap to animate the state change via "className". Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2020 Share Posted March 3, 2020 An unofficial ClassNamePlugin has been posted in another thread on the subject: 2 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