Jump to content
Search Community

Override properties when tweening className

OSUblake test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is there a way to override properties set by GSAP when tweening a className?


Here's a demo where I initially set my boxes to a height of 50. I then tween them to a class that has a height of 150, but the height won't change unless I use clearProps. However, I really don't want to clear any props and you can't animate the clearing of props.



See the Pen Jovpdw by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Yeah, it works.  :unsure:


But you're right, it's a little dirty. I just played around with some of the times, and it got out of sync real quick. Plus, I think it's venturing too much into CSS territory. I'd rather not have the user add !important or define their CSS like .class1.class2 { ...}. I'd just like to tween everything to the values in some arbitrary class. I guess for the time being I'll just do it manually.

Link to comment
Share on other sites

Diaco, adding CSS transitions via GSAP is a major crime with severe punishments.




Totally kidding. I give you points for creativity.




I don't think there really is an elegant, seamless way to do it  that doesn't involve storing the height (50px in this case) that GSAP sets and then manually tweening back to that value at the right time.


The main issue here (which I'm sure you understand) is that GSAP's styles are all inline and they are going to override anything else. 

Due to how much of an edge case this is, (and how tricky tweening className already is) I'm doubtful that we are going to pursue trying to make this work in the API.


Having a hard time imagining how the end-user would specify which properties in the "className" rule should be ignored. 

Might be interesting though if you have suggestions on how the API would look to the end-user.





  • Like 3
Link to comment
Share on other sites

Hello Everybody,


Blake check this out.. using

See the Pen xbjjbr by osublake (@osublake) on CodePen

... using min-height in your CSS rule so GSAP can use it to animate the height.

  • Remove  the GSAP set() method where you apply 50px height.
  • Then set that 50px in the CSS as min-height for .box
  • And then remove  the !important declaration off of the height property making it 150px height for &.boxed ( .box.boxed )

Then the 3 boxes animate the height!


Your forked example Blake (animating height using SCSS):


See the Pen yyEaPO by jonathan (@jonathan) on CodePen


Codepen has issues with CSS pre-processors like SCSS. Sometimes it silently fails on applying your CSS properties in the CSS rules. So here is the same animation without SCSS.


Does this help? :)

Link to comment
Share on other sites

Diaco, adding CSS transitions via GSAP is a major crime with severe punishments.


For Diaco's punishment, he shall procedurally generate a GSAP animation that displays, "I will not use CSS transitions" 100 times on CodePen.



Hi Jonathan,


While your solution does work in the context of this demo, it's not really what I was trying to solve.


It's alright though. I just realized something very important after reading Carl's response. I'll get back to you guys later...

  • Like 4
Link to comment
Share on other sites

So what I realized after reading Carl's post is that all tweens are not created equally. I never noticed this before, but className is a special kind of tween that behaves like a normal CSS operation, so all inline styling is removed after the animation is complete. And if you were to remove the class name, all the styling related to that class would be removed as well. This isn't necessarily a bad thing, and I understand the reasoning behind it, but it did trip me up because I operated under the assumption that all tweens kept the styling inline. 
So here's my suggestion on how the API could handle this differently. Instead of messing with the className property, leave it as it is, and create a different property that handles extending inline styles. This special property could be called something like style or extendStyle, and would accept a CSS rule selector (string), an element, or an array of either. If it's an array, the styles would be merged, so the item on the right would overwrite any matching properties on the left item.

// Extending the style of an element...
TweenLite.to(target, 1, { style: myElement });

// A CSS rule...
TweenLite.to(target, 1, { style: ".my-class" });

// Or a combination
TweenLite.to(target, 1, { style: [myElement, ".class-1", ".class-2"] });

Another property could be provided to filter out any unwanted styles. This could be called filterStyle, and could use the -=,+= assignment operators as a predicate to determine what properties should be extended. The += operator would create a whitelist, so only those properties would be extended. Conversely, the -= operator would create a blacklist, and those properties will be ignored.

// This whitelist will only extend the x, y, and width properties
TweenLite.to(target, 1, { style: [myElement, ".class-1"], filterStyle: "+=x,y,width" });

// This blacklist will ignore any x, y, or width properties, and extend everything else
TweenLite.to(target, 1, { style: [myElement, ".class-1"], filterStyle: "-=x,y,width" });

The style property would also need to run at a higher priority, allowing you to overwrite any of the extended values in the same tween. In case any of this didn't make sense, I created a simple prototype that handles everything described above.

See the Pen gbjqbE by osublake (@osublake) on CodePen


  • Like 3
Link to comment
Share on other sites

I really wasn't expecting my demo to be seen by more than a handful of people, but now it's on the front page of CodePen, so people seem to like the idea. Looks like I'm not the only one that would like to see this implemented. Better get to it!  ;-)

Link to comment
Share on other sites

  • 1 month later...

Not sure how I missed your post here, Blake. Sorry about that. I appreciate the thoughtful consideration and proposal. You contribute so much to the community (and GreenSock directly), so thank you.


I'm struggling a bit with adding this capability (as cool as it is) because it's adding a layer of complexity and file size costs that we'd impose on everyone, but I kinda doubt that even 0.1% of the audience would ever want or need to use it. 


Sometimes I'll be working on a project and stumble across something that sparks an idea for a feature that'd be helpful in that particular (and very rare) project that I'm working on, and it's really tempting to drop it into the codebase but then I realize that I must use restraint, otherwise GSAP may fall victim to feature- and API-bloat. Then again, sometimes ideas like this form the basis for some of the most-loved features in GSAP. It's definitely a balancing act. I just can't remember any other case (off the top of my head) where someone actually complained that GSAP wasn't inlining the style changes. Perhaps this post will spark more interest though. It certainly helps me make decisions like this when the community weighs in. If there are lots of requests for this, I'll definitely consider it. 


Thanks again.

  • Like 2
Link to comment
Share on other sites

Now that I know why className won't tween the way I expected, its not so much of an issue. Plus I learned a lot of different ways to get styles while making that demo, like using the CSSRulePlugin.


What shocked me is how many views my demo was getting on CodePen since it was really intended for people that were reading this thread. All the examples I created were based on a project I was working on that would create a morphing transition between elements. I was trying to create something similar to this quiz demo (click through the general knowledge section). Using className worked well for awhile, but in the end I realized that I only needed a couple properties and not the entire class.



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