Jump to content
Search Community

Choppy animation on IE

Skid X test
Moderator Tag

Go to solution Solved by Diaco,

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

Hi,

testing on IE 11 I'm experiencing a really bad animation rendering.

 

As you can see on the Pen, it is a deadly simple animation: one single div with an image scaling and translating.
On Chrome it is perfectly fluid. On IE instead it is really choppy.
I tried force3D both enabled and disabled: no changes.

I'm on Win7 but a friend with Win8.1 confirmed to me the same result.

Am I doing something wrong, or maybe do you know any hack / trick to solve this issue?

Thanks

See the Pen oXMKpJ by SkidX (@SkidX) on CodePen

Link to comment
Share on other sites

  • 1 year later...

 

Hi Skid X  :)

 

that's one of the IE rendering issues , pls try add just a bit rotation , like this :

.to('.box1', 22, { scale:1 , x:20 , y:30 , easing:Linear.easeNone , rotation:0.01 })

 

Tested on IE Edge and this still works :)

What is the reason this works?

Is there another workaround via CSS maybe?

Link to comment
Share on other sites

Hello, resting .. That is due to the slight rotation:0.01 that kick in the element to be rendered with matrix3d() . basically forcing the browser to render the element using the GPU so you can get a smoother animation. Usually that type of quirk is also in Firefox and Chrome. But as a rule of thumb when translating x and y, a slight rotation usually will help with jank so the element can animate using hardware acceleration. :)

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