[Animating backgroundPosition for several background images]

Noticed another peculiarity: tweening "background-position-y" instead of "backgroundPosition" works properly in Chrome, and doesn't work at all in Firefox.

 

As far as I understand, it shouldn't even tween with "background-position*" at all, in any browser. http://jsfiddle.net/dftks9m1/8/

 

Thanks for another option, Rodrigo.

[Animating backgroundPosition for several background images]

Thanks for a quick reply, Carl.

 

I've added a dummy node to hold the second background image as a work-arond for now.

[Animating backgroundPosition for several background images]

Hi, GreenSock,

 

I'm trying to animate background-position for two background images. It works fine in Firefox, but doesn't in Chrome.

 

Demo (codepen got blocked at work, hope jsfiddle is ok):

http://jsfiddle.net/dftks9m1/3/

If you play animation in Firefox, the two images animate up and down nicely and in sync.

 

If you play animation in Chrome, however, images are also animated horizontally and are out of sync. After the animation is

reversed, the end value of background-position is set to "background-position: 50% 43px, 50% 50%;" which is wrong.

 

Does anyone know what is going on and how this could be fixed?

 

Thank you, and I love your library!

See the Pen by dftks9m1 (@dftks9m1) on CodePen

[Added .call is not executed on reverse]

Thanks, Carl. This explains it

[Added .call is not executed on reverse]

My friend , where you call tl.reverse() , you can put your another functions . actually you dont need onReverseStart .

 

Yes, aplologies for mentioning onReverseStart, forget I did this I was just curious why adding .call to the end of the timeline doesn't work on reverse? Is this a bug or by design?

[Added .call is not executed on reverse]

Hi, Diaco,

 

Yes it will, but I'm asking why using .call doesn't work the same.

Also, since there is no onReverseStart event so you would need to manually call the function before reverse.

[Added .call is not executed on reverse]

I noticed that if a .call added to the end of the timeline, it's not being executed on reverse.

 

In this codepen, , I expect the number in the red box to increase with every button click. However, it increases only on forward animation and stays the same on reverse.

 

If the duration of the first tween (.to) is increased to 0.21,

See the Pen ZYbrMa by anon (@anon) on CodePen

, the number is updated correctly.

 

Also, here

See the Pen wBKyQW by anon (@anon) on CodePen

, when the .call is added to the beginning, the number is moslty increased correctly, but sometimes it looks like the function fails to execute and the number is not increased. This only happens on forward animation.

 

Is there a way to realibly add a .call to beginning/end of the timeline and be sure it will get executed?

 

Thank you.

See the Pen XJmZzV by anon (@anon) on CodePen