Jump to content


Jumpy scaling in IE

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

I have made an image slider for a site I am working on but thought it works in the other major brwosers it is jumpy in IE.  


You can see it in action here http://handrailcreations.co.uk/

	function startAnimate(object) {
		var tl1 = new TimelineMax(),
		slideImg = jQuery('#inner-header').innerWidth(),
		slideImgH = jQuery('#inner-header').innerHeight(),
		slideF = slideImg/26,
		slideH = slideImgH/26,
		leftMove = Math.floor((Math.random()*3))* slideF - slideF,
		topMove = Math.floor((Math.random()*3))* slideH - slideH,
		left = leftMove.toFixed(0),
		top = topMove.toFixed(0);
		tl1.to(object, 1, {autoAlpha:1}, 'zoom')
		.to(object, 10, {scale:1.1, ease:Linear.easeNone}, 'zoom')
		.to(object, 10, {x: left , y:top,  force3D:true, ease:Linear.easeNone}, 'zoom')
		.to(object, 1, {autoAlpha:0})	
		.to(object, 0, {scale:1, x:0, y:0, onComplete: endAnimation, onCompleteParams: [object], ease:Linear.easeNone});


Any ideas?


Thanks in advance


Link to comment
Share on other sites

Hello phsims, and Welcome to the GreenSock Forum!


Just a couple of questions:

  • What is the version of IE you are seeing the jumpy in?
  • Is the version of IE rendering in a different version using Document Mode?
  • What OS are you on?
  • Are using a load event to make sure all images are loaded before trying to animate them?

To better help us see the behavior described, could you please set up a limited codepen example so we can see what might be happening.


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


Thanks! :)

Link to comment
Share on other sites

Hi Jonathan.


thanks for getting back to me


IE 11.  I am using standard (default) view.


I'm on windows7


I am using a windows load event.


Will try to set up a codepen now.

Link to comment
Share on other sites

cool, a codepen will help! .. just from looking at the site in IE11.. i noticed that the images are not animating using matrix3d() ..


so try adding force3D: true to the all your tweens:

tl1.to(object, 1, {force3D:true, autoAlpha:1}, 'zoom')
   .to(object, 10, {force3D:true, scale:1.1, x: left, y:top, ease:Linear.easeNone}, 'zoom')
   .to(object, 1, {force3D:true, autoAlpha:0})	
   .to(object, 0, {force3D:true, scale:1, x:0, y:0, onComplete: endAnimation, onCompleteParams: [object], ease:Linear.easeNone});

and i would also just have scale, x, and y in the same tween since they had the same easing, duration, and label ..


see if that helps? ..

Link to comment
Share on other sites

I have added force3D:true but its not helping.  Trying to sort out a codepen, I have never done one before

Link to comment
Share on other sites

I cant seem to get the codepen to work http://cdpn.io/rnitv.  Its there but the script isnt running, I am half asleep though so that may be the problem  :?

Link to comment
Share on other sites



Sorry to hear that you're experiencing problems, but unfortunately this seems to be a browser thing and nothing to do with GSAP.


Fortunately Jonathan is the forums king when it comes to IE quirks and bugs and he came along with some fixes that might help you in this case.


In this post is thoroughly discussed and a couple of good solutions are given, as well as a good explanation by Jack on why this is solved this way:




And if you check this codepen by Jonathan you'll see how this solutions work:


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



  • Like 3
Link to comment
Share on other sites

Hi rhernando,


That was exactly what I needed.  Worked perfectly.  No I just need to figure out when one of the images keeps appearing in the middle of the slide change when all the sites are set to 0 opacity.  Damn IE  :x

Link to comment
Share on other sites

Rodrigo is right..  its a browser thing, IE doesn't render CSS transforms as good as Safari, Chrome and Firefox.. that example shows how smooth the animations are in those modern browsers, while IE is has slight jumpy rendering.


To get your pen to work .. in codpen you need to click on the JS panel gear icon and add TweenMax JS and jQuery JS scripts.


But here is your codepen forked (copied) with jquery and tween max loaded in the JS panel gear icon JS input fields:


See the Pen xjdcL by anon (@anon) on CodePen


Im seeing the jumpy behavior in that pen in IE11 on Windows 7 (64-bit) PC too.


So maybe adding rotate or scale offsets can help?


Also i noticed your animating the img tag but the img does not have position: absolute or relative on it.. i would put a parent div around each slide img tag.. then set that parent div to position relative.. and then set the images position to position: absolute;


Just my two cents :)

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