Jump to content
Search Community

Looking for help with element scaling oddities and jitters

ekfuhrmann test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I made a grid with a bunch of cells that are supposed to animate a dot scaling up and down on hover, but in doing so I came across some peculiar browser quirks that one of you animation experts here may be able to help me make sense of.

 

First-things-first on Edge (Chromium) when I hover on a cell, the dot will smoothly scale up and down as expected, but it will also occasionally leave some ghosting behind like the following:

image.png.580cfe8840b5cc833d9571ce93343a41.png   

 

Moving a cursor over any of these points or simply re-animating the cell will usually clean it up, but it's definitely far from ideal. I figured that this had to do with GPU Acceleration, so I then went and added will-change: transform to the element, resolving the ghosting but resulting in the following...
image.png.eb0fcf9049cd4f90dc16ff379fe5bb06.png

 

The elements become rasterized!

So I figure this surely must be a Chrome issue, in fact I came across this article right here on Greensock which seems to be covering this very issue; however, it's many years old and I had hoped that Chromium would have released a fix for this by now.

Meanwhile in Firefox my issues are different but equally curious. When hovering over each dot in Firefox, the animation comes off jittery, but will-change at least doesn't run into the rasterized issue Chromium browsers do have.

 

So I'm curious if anyone has any advice on how best to go about handling this rather simple animation smoothly in a cross-browser friendly way?

 

 

See the Pen wvojJGQ by ekfuhrmann (@ekfuhrmann) on CodePen

Link to comment
Share on other sites

  • Solution

Here are a few techniques you can try:

  1. Instead of animating UP from a scale of 1 to 8 build your elements so that at they're 8x the native size, but set them initially to a scale of ⅛ so that you can animate up to a scale of 1. Think of it as though the browser takes a screenshot of the element at its native size, and then scales that screenshot - that's why it gets all blurry at 8x scale. Following my suggestion here basically means you're having the browser take the screenshot at a much higher resolution. This has absolutely nothing to do with GSAP, of course - it's how some browsers "optimize" performance (thanks browsers!). 
  2. Try rotating the elements slightly - some browsers apply pixel-snapping which makes them seem jerky. If you rotate or skew things (even slightly), it gets the browsers to stop doing the pixel snapping and make things smoother. Again, none of this is GSAP-related. 
  3. See if setting force3D to false or true resolves things. By default, it's "auto" which uses 3D transforms during the tween to get GPU-acceleration, but then switches it off when the animation is done (assuming it doesn't actually need 3D transforms). 
  4. If all else fails, just use SVG instead of regular DOM elements :)

Good luck!

  • Like 3
Link to comment
Share on other sites

Ah, this is why I love this community so  much -- your wealth of knowledge and assistance is absolutely top!

Going with your first suggestion resolved the Chromium issue as the element was able to scale down no problem, and then your second suggestion of adding a slight rotation to it resolved the Firefox issue. Fantastic stuff, thank you!

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