Weird edges along an image that has been animated

[justintime]

I have this animation on an image contained in a parent that has a background color and overflow hidden. At rest, the image fills the container, so the background color is not visible.

 

gsap.timeline({ repeat: 1, yoyo: true })
     .to(element, { scale: 1.1, duration })
 

This makes an image zoom a bit and return back to its original state.  When it finishes, unfortunately the image has some tiny left and right borders that make the color of the parent visible.

 

The problem is that after the animation, some styles added by gsap are kept on the image element:

 

translate: none;
rotate: none;
scale: none;
transform: translate(0px, 0px);

 

This is the transform property that creates these parasite lines around my image. If I comment it in devtools, they go away.

 

[Rodrigo]

Hi,

 

You could try clearing the inline styles applied by GSAP using clearProps on an onComplete callback:

gsap.timeline({
  repeat: 1,
  yoyo: true,
  onComplete: () => gsap.set(element, { clearProps: "scale" }),
})
  .to(element, { scale: 1.1, duration: 1, });

Another option could be to try using will-change: transform on those images and see how that works.

 

Hopefully this helps, if you keep having issues, please try to create a minimal demo so we can have a better look.

Happy Tweening!

[justintime]

Thanks. clearProps at the end helps.

 

But I realize that the problem is broader and outside of gsap. Even a CSS animation on opacity creates this kind of lines along the image during the animation. Not sure what the issue is here...

[Rodrigo]

Yeah, this seems more like a browser rendering thing rather than anything else, sometimes some combination of negative margins and padding can help, maybe you could try something like that and see if it works.

 

I wish we had a simple one line solution for this.

 

Happy Tweening!

[justintime]

Thanks. I fixed it in another way, by removing the background color when it was not needed. That way, no visible strange edges on my images.

[Rodrigo]

Great to hear about it! Yeah sometimes we have to hack our way into something working the way we need 🤷‍♂️

 

Happy Tweening!