Jump to content
Search Community

ie problem with animation

moglie 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

I put together a simple slideshow animation and it works in Chrome and Firefox but not in ie. The images slide left to right like a typical slideshow but in ie, the position of the container is reset to 0 on every transition and then it animates to the next position.

 

This is all that's going on in TimelineLite:

 

 

var tl = new TimelineLite({delay:1, onComplete:completeHandler});

tl.to( d1, 2, {css:{x:-420}}, 1)

.to( d1, 2, {css:{x:-840}}, 1)

.to( d1, 2, {css:{x:-1260}}, 1)

.to( d1, 2, {css:{x:-1680}}, 1);

 

So after the 1 second delay, the postion is set to 0 and then animates to -420. After 1 second, the position is reset to 0 and animates to -840 etc. etc.

Link to comment
Share on other sites

Ah yes, I needed to tweak something in the code to work with non-absolute positioned objects in old versions of IE that were translated (x/y). Should be resolved in the latest version. However, tweening the "left" or "right" will definitely perform better in the browser, so I'd recommend sticking with those. And the performance difference isn't really related to TweenLite - it's just that the transform properties (x, y, scale, rotation, and skew) all require a filter in old versions of IE and filters eat up a lot of resources in general. It's a browser thing. Gotta love Microsoft.

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