CSS Scale Animation Popping Issue

[anthonygreco 56 Likes (Contributor)]

Wondering if there's a way to get around a "popping" issue I'm seeing in CSS animations. It seem to happen when handling the animation both natively and via gsap cssplugin. I did some googling and found this post which seems to fix it in native css animation, but when i try the same technique in gsap i still see the same issue. Here's the post on stackoverflow for the native fix and here's a jsfiddle showing that it works well and finally here's a jsfiddle of the same thing via gsap. Any thoughts on why this is happening and/or how I may go about resolving it?

[Jonathan 5,318 Likes (Superhero)]

Hello and welcome to the GreenSock Forums!

 

This doesn't look like a GSAP issue.

 

But there are a number of things you can try adding Anthony:

• you could try just animating scale(), since your animating both scaleX() and scaleY() with the same value.
   
• Use force3d:true in your to() tween.. so you can have GSAP apply the transform matrix3d() on your element.. which will kick on hardware acceleration for smoother CSS animations.
   
• Add translate3d(0,0,0) to your CSS style sheet, that is another way to tell the browser to use hardware acceleration. translate3d(x, y, z); ... And since translateZ values are both 0, you wont need to animate them in your tween since the value is always 0.
   
• Also adding position:absolute to your transformed element, this one is very important

take a look at this example:

 

 http://jsfiddle.net/Nt9Hw/13/

 

JS:

$(document).on(' mouseenter','.test-gsap',function() {
    TweenLite.to($(this), 0.5, {
      scale: 1,
      force3D:true,
      ease: Power4.easeOut
    });
}).on('mouseleave', '.test-gsap', function() {
    TweenLite.to($(this), 0.5, {
      scale: .95,
      force3D:true,
      ease: Power4.easeOut
    });
});

CSS:

#wrapper { 
    position:relative; 
    width: 225px;
    height: 148px;
}

.test-gsap {
    position:absolute;
    width: 225px;
    height: 148px;
    background-image: url(http://placekitten.com/225/148);
    -webkit-transform: scale(0.95) translate3d(0,0,0);
    -o-transform: scale(0.95) translate3d(0,0,0);
    -moz-transform: scale(0.95) translate3d(0,0,0);
    transform: scale(0.95) translate3d(0,0,0);
}

HTML:

<div id="wrapper">
        <div class="test-gsap"></div>
</div>

the wrapper div is there so when you absolutely position .test-gsap it will be relative to the #wrapper div

 

and see if it helps!

[GreenSock 12,429 Likes (Superhero)]

Yep, jonathan go it.

 

The problem is that you're using translateZ:0 instead of z:0, and even if you do that, CSSPlugin is smart enough to not apply 3D transforms unless there are actually 3D properties that need to get rendered, but you can force 3D using the force3D:true special property. Just add that to your tween(s) and you'll see that it fixes the browser rendering issue (which actually has nothing to do with GSAP, by the way). 

[anthonygreco 56 Likes (Contributor)]

Perfect! Thank you both for the thorough explanation of what the root of the issue was. And Jonathon, thanks for the JSFiddle example proving that. Great community here. I'll definitely be sticking around.

[Rodrigo 3,492 Likes (Superhero)]

Hi Anthony,

 

What you need is force3D:true.

 

What that does basically is put the content being animated in a GPU layer , pretty much like adding a tiny amount of translate on the z axis. I'm not a connoisseur of CSS animations/transforms but perhaps the reason is that you were adding a translateZ:0, which basically doesn't move the element at all and ultimately won't pass it to the GPU.

 

Now the only caveat with the force3D is that if you pass too many elements to the GPU will ultimately create too much workload on the GPU and create performance issues.

$('.test-gsap').on({
  mouseenter: function() {
    TweenLite.to($(this), 0.5, {
      scale: 1,
      ease: Quad.easeIn,
        force3D:true
    });
  },
  mouseleave: function() {
    TweenLite.to($(this), 0.5, {
      scale: .95,
      ease: Quad.easeIn
    });
  }
});

Rodrigo.

 

PS: well, there you go 3 answers for the price of one.

PS2: Shouldn't you be celebrating Thanksgiving with your families ?