Jump to content
Search Community

IE8 NaN's when transforming x and y (CSSPlugin)

Jake test
Moderator Tag

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

Hey all,


I'm hitting a very frustrating wall trying to make my tweens work in IE8. When attempting to transform my elements with the x and y properties, I get "error: Invalid argument" on line 1308, which I've traced back to line 1236. It seems that at the beginning of _setIETransformRatio, the _gsTransform object already has the value 'NaN' for its x (or y) property. Strangely, the properties show the correct values right up until the tweens begin, but as soon as they do, the values become NaN. 


I've searched the forums to no avail. I don't think it's my CSS, as the problem still shows up if I disable it all. Also worth noting is that my timeline is actually paused and controlled by the user's scroll position. 


Working on putting together a codepen, but any help in the meantime would be greatly appreciated!

Link to comment
Share on other sites

Hello Jake, and Welcome to the GreenSock Forums!


I have some questions to find out more info:

  • Are you using from(), fromTo(), or staggerFrom() tweens?
  • Does your element(s) have any default CSS applied via the style sheet or through GSAP to give the element(s) a default value on start?
  • Are you seeing this in real standalone IE8 or is it a fake rendering mode in IE10 or IE11?
  • What OS and version are you seeing this on?
  • Is this on a PC, Linux, or MAC?
  • Is this a vmware or virtual environment?

There could be a number of things happening, especially in IE8. In order to better help you, do you have any code for context so we can see what you see?


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


Please note that in IE8, codepen will ONLY work in Full View Mode.


We love code we can test and edit in a live editable environment, this way we can better help you!


Thank You! :)

Link to comment
Share on other sites

Wow, thanks for the unbelievably snappy and helpful response. Codepen is here:

See the Pen msaCF by jakezien (@jakezien) on CodePen

  • I'm using staggerFrom().
  • As far as I can tell, there's nothing applied by default, but I copied all the CSS on the relevant elements to the codepen. I've set it up so that by default, the element is positioned correctly, and I use the from tween to bring it in from offscreen.
  • I'm using real IE8, both on a real Win7 machine and a VirtualBox install of XP on my mac.

Still investigating, and will report back if I find anything else. 

Link to comment
Share on other sites

Agh, jeez, this is embarrassing…


Just figured it out. The problem was actually in my code that interpolated my timelines based on the scroll position — I was using window.innerHeight, which isn't supported in IE8. Just fixed it. Thanks so much for pointing me in the right direction, though! I'm amazed at how good this tech support is, especially for a free product. GreenSock is really, really the best.

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