Screen artifact when tweening multiple background images

[Justin N]

Hi, 

Thanks to Cassie and Craig, they've helped me animate continuously the scrolling of three background images. 

 

The solution involves horizontally moving an image from left to right.  A copy of the image is placed after the first original image so that the image never stops. I've kept the edges clean so that you can see (straight vertical sides) where one image ends and the next begins. 

 

However, disregarding the fact that I haven't matched the start and end edges of the image, you can see that a line is formed in which the update isn't drawing quite fast enough as the image positions are updated. I've tried overlapping the side by side images but that didn't seem to help.  Notice the line in the back tree layer (dark green) on the left half of the screen.

 

Any ideas Please ?

 

 

[GreenSock]

It's very difficult to troubleshoot without a minimal demo, but here are a few guesses/comments:

1. Make sure the edges are totally "clean" (opaque) and not partially transparent or anti-aliased
2. Overlap them by 1 pixel
3. Try applying a snap, like snap: {x: 1}. Sometimes when browsers try to render sub-pixel coordinates, they mush things a bit. 
4. In general, it's not a good idea to animate background images because [at least some] browsers don't optimize performance on those nearly as much as animating a regular image inside a <div> with overflow: hidden (same look, better performance). 

In any case, this has nothing to do with GSAP as far as I can tell. It's just a browser rendering thing. If you still need help, please make sure you provide a minimal demo as a CodePen. 👍