Class styles no longer take affect after animation

[chris-canipe 1 Likes (Newbie)]

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?

 

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

[Carl 10,737 Likes (Superhero)]

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

[OSUblake 18,328 Likes (Superhero)]

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;
}

 

[GreenSock 16,222 Likes (Superhero)]

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.