Jump to content
GreenSock

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

GSAP 3 not work add classes

Recommended Posts

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.

Link to post
Share on other sites

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 2
  • Thanks 1
Link to post
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 post
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 post
Share on other sites
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 post
Share on other sites
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 post
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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

An unofficial ClassNamePlugin has been posted in another thread on the subject: 

 

  • Like 1
Link to post
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.

×