WEIRD AS HECK: Gif looks grainy. Looks fine in preview and when I resize browser?

I made a gif and put it in my site. It looks great when previewed in the designer but when I view it in preview mode or live it gets significantly more grainy. Any idea what the issue may be? I need it to be a gif and not a video because it has transparency on it.

I also find that I can “fix” it and make it look normal in the live site if I shrink the browser window horizontally (even by a single pixel) and then resize it back to full screen. But the default look when i refresh is still grainy.

Here is my site Read-Only:
It will probably look fine when you click this link but just click the preview button twice and you will see what I mean:

[https://preview.webflow.com/preview/seandexter?utm_medium=preview_link&utm_source=designer&utm_content=seandexter&preview=13178fba6d88798f500990c61c38c2c9&mode=preview][1]

If the gif is too big it is because webflow is converting it using their responsive sizes… you can turn it off on that single image by typing CMD + Shift + O and then unchecking “Responsive Image”

You might want to optimize this image using something like gif optimizer:

Actually I just looked and its because of this css thats getting added by your interactions?

Edit… its because of your transforms… causes images to be blurry sometimes:

You might have to rethink how you are moving the image not using transforms.

1 Like

Awesome, thank you! Never would have figured that out myself.

My solution I ended up with (for anyone in the future looking up a similar problem): When the animation starts the gif is replaced (opacity animation) with an identical one that then moves position. When it reaches the new position it fades out as a 3rd GIF fades in in the new position. It won’t win any elegance awards but it works!