Jump to content
Search Community

Class styles no longer take affect after animation

chris-canipe test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

In the linked CodePen (and attached GIF) an item is rendered, a class is added, and then an animation is applied. The class changes the opacity to 0.5 and this works when it is applied and throughout the animation; however, after the animation the opacity changes even though the class is still applied. What's also odd is that as soon as I right-click the element in Chrome, the opacity takes affect!

 

Is there something going on with GSAP under the hood?

 

gsap.gif.e6401a640ba077e6dec346da6c0896c1.gif

See the Pen abLRbda by epicyclist (@epicyclist) on CodePen

  • Like 1
Link to comment
Share on other sites

thanks for the minimal demo!

So strange. 

I'm not one to be able to discuss the inner workings of GSAP like this, but in case it helps anyone it seems that other properties do not exhibit this behavior. for instance changing opacity to color:white

 

.dim {
  /* opacity:0.5 */
  color:white;
}

 

See the Pen vYeVOmz by snorkltv (@snorkltv) on CodePen

  • Thanks 1
Link to comment
Share on other sites

  • Solution

I doubt it has anything to do with GSAP as the properties are correct when you inspect the element. Adding will-change to the CSS seems to have fixed the issue.

 

p {
  background: forestgreen;
  display: inline-block;
  padding: 1em;
  margin: 0;
  border-bottom: 1px solid darkgray;
  will-change: transform, opacity;
}

 

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

Yep, Blake is right - this is totally unrelated to GSAP. It's a browser rendering bug. I believe it has to do with the fact that the browser doesn't handle switching from a 3D to a 2D value, like:

 

transform: translate3d(0px, 0px, 0px);

to:

transform: translate(0px, 0px);

GSAP uses 3D transforms DURING the tween to maximize performance, and then reverts to 2D (when possible) when the animation finishes to maximize rendering clarity (sometimes 3D stuff can look slightly fuzzy). You can set:

gsap.config({force3D: false});

To tell GSAP not to use 3D transforms during the tween. That seems to resolve your particular scenario. But again, this isn't a bug with GSAP or anything - it's a browser rendering bug. 

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