Jump to content
Search Community

GSAP 3 not work add classes

Marten002 test
Moderator Tag

Recommended Posts

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:

  1. 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.
  2. From a code perspective, being explicit about which properties you're animating helps to make your code more maintainable and aids in troubleshooting/readability. 
  3. 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.

 

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

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

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:

  1. 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.
  2. From a code perspective, being explicit about which properties you're animating helps to make your code more maintainable and aids in troubleshooting/readability. 
  3. 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

  • 3 weeks later...
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

  • 4 weeks later...
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

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?

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 4 weeks later...

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