Repeating animation is causing artifacts

[garyw]

We are seeing some strange artifacts when animating an object.  We have a small image that we bob up and down using TimelineMax.  Here's the code:

 

this.tabButtonTimeline = new TimelineMax({repeat:-1, delay:1, repeatDelay:0.5});

 

this.tabButtonTimeline.to(this.tabButton, 0.1, {y:-4}).to(this.tabButton, 0.2, {y:0, ease:Power1.easeOut});

 

On an iPad, while this small button is animating, a block of text elsewhere on the screen has a slight distortion that changes in time with the animation.  It looks like half of each line of text shifts up and down a pixel.

 

On IE, our client is observing an "x" symbol that appears and disappears in time with the animation.  We are unabel to reproduce this one, but our client has shown us a video of it.

 

Could this be the result of force3D?  Would turning it off eliminate these issues?

 

 

[Jonathan]

Hello garyw, and Welcome to the GreenSock Forum!

 

To turn off force3D you could add force3D:false on your tween. force3D:auto is the default.

 

But since this is on an iPad it could be a number of browser bugs in Safari, causing this issue. It could just be a CSS property that needs to be added or removed to fix the issue.

 

This will be hard to debug without an example. Would you be able to create a limited code example so we can see this behavior you describe in context.

 

Here is a great video tut by GreenSock on how to create a codepen demo example.

 

This way we can better help you by seeing your code live so we can test and debug it.

 

Thank You