Jump to content
Search Community

Weird animation glitch with Webkit (rotation+background image position)?

ururk 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'm trying to figure out if this is an issue with webkit, GSAP, or how short my animations are:

 

(trigger play() with mouseover, reverse() with mouseout)

 

Broken in Webkit (Safari/Chrome), but OK in Firefox (tested on Safari, Mobile Safari, multiple devices):

http://www-personal.umich.edu/~jparisea/pb/anim/

 

In Safari if you watch the animation above till it stops, then move the mouse away, when it plays in reverse, the lid of the bottle does not animate properly.

 

As I was driving home today I thought about putting the background sprite on a div inside the div being rotated, and it seems to have fixed the issue:

 

http://www-personal.umich.edu/~jparisea/pb/anim/index_works.html

 

 

I guess my only real question is:

 

Because of how short my animations are, and how they overlap, am I misusing TimelineMax, or is this a webkit bug - rotation}+background image position? I don't like this solution as it requires yet another div... but it seems to have actually improved how "smooth" the animation plays.

 

Thanks!

 

John

Link to comment
Share on other sites

Hi Ururk,

 

Welcome to the GreenSock forums. Sorry to hear you are having trouble.

 

I don't know exactly what is causing the problem but I tried to get a few issues off the table.

 

1) webkit-browsers and/or GSAP don't have an inherent problem rotating an object and changing backgroundPosition.

 

2) really short tweens aren't a problem either. Although if your tween is only .00001 seconds long, there isn't going to be any noticeable animation happening and you might want to use TweenLite.set() (the same as a 0-duration tween)

 

example of set():

TweenLite.set(bottleCap, {css:{top:100}});

 

Here is a little demo I created which rotates and changes the backgroundPosition of an element a variety of ways:

http://jsfiddle.net/...bassador/2xGMG/

 

I created this just to back up my assumptions stated above.

 

In the second example I tried to roughly simulate your timeline and couldn't force the error you were seeing.

 

The only thing I would suggest just for kicks is to make sure you are specifying "px" as units when changing the backgroundPosition, especially in this tween here:

 

tl.to(bottletop, 0.00001, {css:{backgroundPosition:"0 0"}}, delay); //try "0px 0px"

 

Also note, if you aren't changing the vertical position, you only need to pass in 1 value

 

tl.to(bottletop, 0.00001, {css:{backgroundPosition:"100px 0px"}}, delay);
//same as
tl.to(bottletop, 0.00001, {css:{backgroundPosition:"100px"}}, delay);

 

it's one of the many conveniences baked into the CSSPlugin.

 

Since adding a new div solved the problem for you, I'm guessing there may be an overwriting issue (tweens overlapping) but nothing is jumping out at me.

 

Your 2 files definitely were helpful, thank you. But in order to really track this down it would help to have a simplified version that we can test locally.

 

Feel free to post a zip of your files and please strip out all extraneous animations so that we don't have to wait a number of seconds each time we test. Just include enough tweens to illustrate the problem clearly. Perhaps in a simplified file the issue will be more apparent.

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