DotFreelance

The problem, for those looking here at a later time for solutions, can be partially summarized as follows: Using frameworks: Bootstrap 2.2.2 Bootstrap Responsive JQuery JQuery UI TweenMax ( the full GSAP platform ) The problem: Certain animations hitch badly in IE, specifically IE9. The ones that were worst for me were scaling. The solution: Upgrading to Bootstrap 3.X where possible, removing the Bootstrap framework, or not using any absolutely positioned elements on the page at all. The solution I chose: I chose to remove all absolutely positioned elements. I was unable to choose to upgrade Bootstrap ( best choice ) and unable to remove Bootstrap ( worst choice. )

I am in other portions of the code, yes. What I've come to conclude is that the issues are resolved when I remove a portion of the Bootstrap CSS. We're using Bootstrap 2.2.2 with the Responsive plugin -- that plugin is now built into Bootstrap in newer versions. Unfortunately, the newest versions of Bootstrap won't implement with any backwards compatibility, so it's not possible for us to move ahead in versions at this point. Any assistance going forward would be suggestions for what Bootstrap might be doing that could affect the performance of a scale operation in IE or any methods for testing and checking the procedures that are happening in IE in real time. I'm going to be further investigating to see what options GSAP offers us -- what will work in the IE9 test environment. If anyone can think of anything that might specifically affect the performance of these animations in IE9, I'd appreciate hearing your thoughts.

Jonathan, The code pen I have created works fine in IE9 on the VM. Changes here were unnecessary: the code pen does not replicate the issue, unfortunately. Application of force3D doesn't seem to have an effect on the live file. I've spent some time reading a few articles here and blogs regarding performance using alternate threads or by using additional composite layers, but this doesn't seem to solve this particular problem. I fear it's something else interfering with the animation cycle, but I can't think of what it might be. Using y or x instead of top or bottom creates a massive performance decrease in IE9 with the live file. I've also moved all styles from inline to the CSS block in the live file to no avail. The opacity property appears to be fully supported in IE9 and at least partially supported in IE8 -- although IE8 is not a concern for me at this point. Fortunately, opacity transitions work wonderfully in the IE9 instance and so do translations. They're all acceptably smooth. The animation issue seems to affect only the scaling and any animations happening during the scaling. The animation begins, may play for a frame or two, then skips to the end of the animation. It's quite jarring, as the rest of the animations look fine. I wasn't able to find the Tools > Compatibility View Settings in IE9, however I opened the developer tools and made sure that IE9 is set to Browser Mode: IE9 and Document Mode: IE9 Standards. Realistically I feel as though it's an inherited property from some other framework, since the animation works fine in the code pen in the virtual machine's IE9. The suggestions you're providing are the sort of thing I need, the sort of thing that might be the tweak that fixes the issue. This isn't the only issue, but it's certainly the issue I'm focusing on for now. Hopefully these hints will get me that much closer. I'm going to start systematically removing frameworks that are non-essential until I figure out what is causing the issues. If I find something specific, I'll report back. If you think of anything that would be a good jumping point, let me know.

Thanks Jonathan, The code I'm working on is an animation sample. I'm attempting to find out what works best or at all for IE9 since that is our production environment as it stands. Other production environments will be used including mobiles, but the IE9 environment is the primary. Here's a small bit of what I have: http://codepen.io/DotFreelance/pen/nwjeD The testing environment is a virtual machine ( VBox ) of Windows 7 Enterprise SP1 with IE9 and has been given access to two logical CPUs, 2GB of RAM, 256MB VRAM and 2D/3D acceleration. The host is a maxed 27" mid-2011 iMac. My elements are positioned relatively with CSS. I've tried adding zoom:1 to the style of the exterior element but to no avail. The issue only seems to occur with scaling, not with translation ( anymore. ) Removing the text-shadow animation doesn't seem to make a difference. These elements are all within a larger frame that is brought into focus using an opacity transition. That container is also constrained to the size of the window, and overflow has been set to hidden for both x and y. The help is really appreciated!

I've looked around this website and the internet at large for a little help, but I'm not sure I'm even searching for the correct thing. The problem I'm having is that the scale attribute, as it's applied inside a TweenMax.to( ), seems to stutter to the point of essentially skipping the animation to the final frame in IE9. Unfortunately the deployment environment I'm working with is Windows 7 with IE9 strictly, so my options are limited. I believe GSAP works fine in IE9 -- all of the animations work pretty much as expected on this website's showcase animations. Here's how I have my setup: 1. The page is framed by the Twitter Bootstrap Framework 2. Other scripts exist alongside GSAP: jQuery most notably. 3. The calls to TweenMax.to( ) are being made sequentially with a timed delay rather than being a part of a timeline. Most of the animations do not run over one another. Things I've tried: 1. Changing the scale value to "msTransform":"scale(1.4,1.4)" seems to have no effect -- no effect at all that is, scale no longer happens at all. I assume the value scale:1.4 makes the call to the proprietary values anyway. 2. Removing and manipulating animations around this one to isolate it as the singular animation. This exact effect was also happening with a translation when using x and y but was corrected by using left and top. Not sure if that helps determine what I might be doing wrong. I have a feeling it's not directly GSAP related but thought I might find some insight here over what could be causing the problem.