Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dada78

Scaling Animation Issues in IE10 and 11

Recommended Posts

Hi guys,

I am working on a banner animation that involves scaling 2 images (placeholders) at the same time in a sort of parallax effect:

 

See the Pen ffb31fe839a80e3e8f4826561bd3f691 by dada78 (@dada78) on CodePen

 

It animates smoothly in webkit and mozilla but stutters (a lot) in IE10 and 11.

 

ANY clues how to solve this at all?

 

Thanks!

Link to comment
Share on other sites

It looks to me like IE is applying pixel-snapping in their rendering algorithm (which has nothing to do with GSAP). Try applying a super small amount of rotation to force IE not to snap pixels. Like rotation:0.1. Seemed to work well when I tried it.

  • Like 3
Link to comment
Share on other sites

Yep, thanks Jack! Adding 

rotationZ: 0.01

did the trick! Awesome :-) 

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

If we put this little golden key in the css of the root element of the ad, the nice smooth movements are back in IE!

 

transform:rotateZ(0.001deg);

 

No more complaining from the Client who is checking the banner on IExplorer on his office laptop.

No visible rotation, no increased processor usage.

 

Its more like a diamond key!

  • Like 3
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.
×