Jump to content
Search Community

Background images not animating smoothly in IE

nicolasdesle test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hello nicolasdesle, and Welcome to the GreenSock Forum!

 

  • What is the IE version you are seeing this in?
  • What OS and OS version are you seeing this on?
  • Do you have some code examples for context so we can see what your doing in your tweens for context?

Even better, we love code we can test and debug live. If you can please create a reduced codepen example I'm sure we can better help you?

 

This seems more of a browser quirk, and not a GSAP bug. Sometimes adding a specific CSS property or adding or removing a CSS property can correct this browser behavior.

 

Here is a video tut by GreenSock on how to create a codepen demo example.

 

 

:)

Link to comment
Share on other sites

Also are you animating a background-image on a div or are you animating the background-image's background-position property?

 

Each would be animated differently depending on what and how your animating those CSS properties.

 

Whether you are animating background-position or animating CSS transforms. We would need to know which?

 

If you are animating with CSS transforms a div or other element with a background-image, then I know sometimes in IE and Firefox... that adding a slight rotation can help animate it smoother. Like rotation: 0.01 .. and also adding force3D:true, especially if you translating elements really slow in x or y.

 

But like i said above, a codepen example helps us see your code in context to better help you. And is the best way to test code for cross browser. :)

Link to comment
Share on other sites

Keep in mind that CSS transforms usually have a bug when scaling an element or an image passed a scale factor of 1. That is why usually it is best practice to start with your image or element at its largest size. And then use the GSAP set() method to scale the element (background-image) or image down to zero or whatever. Below a scale factor of 1. And then when you scale up, you would be scaling to a scale factor of 1 ( scale:1 ).

 

This way the background-image would be scaled to its maximum size and you don't have to worry about your image getting blurry or scaling jittery due to that browser bug.

 

But like i advised above you should also add a slight rotation to the same tween you are using scale on to help with that jitter!

 

So for example one of your tween you animating scale.. so add a slight rotation to all those tweens that use scale

TweenMax.to("#frame2", 8, {ease:Linear.easeNone, scale:1.05, rotation:0.01});

And you can add force3D:true to those tween as well, to force hardware acceleration and move that element to the GPU for better performance.

 

force3D is part of the CSSPlugin:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • force3D
    As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

Thanks for the example.. but we can only make recommendations since we cant test your code live, like if it was in codepen. Where we can edit your code live.

 

:)

  • Like 3
Link to comment
Share on other sites

Another thing to keep in mind that based on your example.. technically they not an image. Even though you are using an SVG file as your background-image. There are also known bugs in webkit, Firefox and IE when animating a DOM element with a background-image that is an SVG file. This known bug can cause the SVG to be blurry and also translate really bad. But again this is not a limitation or bug with GSAP but is a browser bug that affects SVG files used in a CSS background-image within a CSS rule.

 

Keep in mind that in Chrome (webkit), Safari (webkit), and IE, that you could also animate the CSS zoom property instead of scale... but Firefox does not support this property.

 

This is an ongoing bug that affects SVG fragments inside a CSS background-image.

 

But force3D:true and  slight rotation should fix this behavior. Also keep in mind that IE has bugs which can affect a SVG file used in a background-image. So you might have to make sure your SVG tag inside your SVG file has a width and height attribute, unless the SVG's aspect ratio matches the element flawlessly.

 

So make sure you use a specific width and height attribute on the SVG file source for IE

 

Sometimes using the CSS property background-size can help with this to, but it needs to be exact dimensions.

 

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

Thank you for the reduced codepen example, its a big help!

 

I'm glad you took my advice and are scaling to only scale factor 1. It looks like you missed adding one of my other suggestions from above.

 

So all you need to add a slight rotation: 0.01 to the tween your scaling

 

See the Pen mVzVEB by jonathan (@jonathan) on CodePen

TweenMax.to("#band", 10, {scale:1, rotation:0.01, ease:Linear.easeNone});

I checked my forked codepen and it animates smoother in IE10 and above now with that slight rotation: 0.01

 

I tested on windows 7 (64-bit) IE10 and IE11

 

See if that helps! :)

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hi, does anyone find that in the last few days Chrome rendering has become very sloppy? A week ago I created a banner using a zoom, very similar to the examples above...using slight rotation and force3D true....the animation was smooooth... now when I open the file, or even when I open some of the examples regarding this topic on codepen..same thing, sloppy/laggy..anyone?

Link to comment
Share on other sites

Hi Franky_b :)

 

Welcome to the forums.

 

Yep - there are some strange things happening with Chrome 49. We've got a couple threads going right now:

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/

 

http://greensock.com/forums/topic/13975-scale-text-animation-in-chrome-flickering-and-not-firefox/

 

Not that those threads will solve the issue, but they may provide some more info for you.

 

Happy tweening and welcome aboard.

:)

  • Like 1
Link to comment
Share on other sites

  • 2 years later...
On 2/4/2016 at 4:26 PM, Jonathan said:

 

So for example one of your tween you animating scale.. so add a slight rotation to all those tweens that use scale


TweenMax.to("#frame2", 8, {ease:Linear.easeNone, scale:1.05, rotation:0.01});

And you can add force3D:true to those tween as well, to force hardware acceleration and move that element to the GPU for better performance.

 

Still needed in 2019 to get things (smoothly) running in IE11 ! Thank you for this discovery / bugfix.

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