en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en de en en en en en en en en en en en en en en en en lv nb en en lv hbs_lat it en en en en en en en en lv nb en en lv hbs_lat it en en en en en en en en lv nb en en lv hbs_lat it en en en en en en en en lv nb en en lv hbs_lat it en en en en en en en en lv nb en en lv hbs_lat it en en en en en en de en en en en en es en it en en en en en pl en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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. )
IE9 - Scale and animation skipping
DotFreelance replied to DotFreelance's topic in GSAP
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.
IE9 - Scale and animation skipping
DotFreelance replied to DotFreelance's topic in GSAP
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!
IE9 - Scale and animation skipping
DotFreelance posted a topic in GSAP
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.
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.”
“Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream.”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“I was astonished by the speed and versatility of animating with GSAP.”
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.