<p>I’m collaborating as a UI designer with a company whose development team works on their web and mobile apps. They send me their requirements, and I deliver the necessary graphics. Recently, I’ve been experiencing a recurring issue with animations. They seem to only want GIF files, while I provide SVG, HTML5, or Lottie animations with the appropriate code, which always get rejected. <a href="https://share.cleanshot.com/GVpqpDkC" target="_blank" rel="noopener nofollow">The final result is often something I’m not happy with</a>. This has led me to seek answers. I want to understand their preferences and processes so I can work with them more effectively rather than against them.</p>


The Watercooler Squad is an important place for all things unimportant and nonsense at daily.dev. It’s designed to waste your time and distract you, buckle up 😻 🤹🏽‍♀️

Watercooler

A UI designer is facing challenges as the development team prefers GIF files over SVG, HTML5, or Lottie animations for their web and mobile apps. The designer seeks to understand the team's preferences and processes to improve collaboration.

SVG vs GIF animations debate...

<p>I’m glad you’re using the latest tech.</p>
<h1>GIF</h1>
<p>Using GIF for animations have more cons than pros. The only advantage using GIF has nowadays is the ease of usage. upload the GIF to CDN, put an image tag with the url to GIF, write some css to position it and it works.</p>
<p>But, it’s heavy on size, that means slower load times, bad experience and bad graphic in HD and high density displays (apple retina displays).</p>
<hr>
<h1>SVG</h1>
<h2>Pros</h2>
<ul>
<li>lesser size so  faster to load</li>
<li>more ways to animate</li>
<li>has cross-platform support for all the features in modern browsers</li>
</ul>
<h2>Cons</h2>
<ul>
<li>very hard to find good docs explaining how to use it.</li>
<li>hard to understand documentation everywhere.</li>
<li>in short, steep learning curve, similar to CSS.</li>
<li>hard to use with angular, react or vue (just IMO, not generalising it for everybody)</li>
</ul>
<hr>
<h1>Lottie</h1>
<h2>Pros:</h2>
<ul>
<li>easier than using plain SVG &amp; HTML5</li>
<li>better support for angular, react, vue</li>
</ul>
<h2>Cons:</h2>
<ul>
<li>Lottie players are heavy. Performance conscious engineer would prefer not to add lottie player to a page for one or two animations. It can only be justified if you’re using a lot of animations OR your page does not need to be performant.</li>
</ul>
<p>If someone is not ready to accept the newer tech, it can possibly be that</p>
<ul>
<li>doesn’t know how to do it</li>
<li>if knows a little about it, doesn’t have the time to gain expertise.</li>
<li>there is no goal or incentive to making it more performant or more beautiful.</li>
</ul>
<p>The way forward is to have a talk with them on why the team is not keen on using it and then try to solve what’s holding them back.</p>


<p>i am assuming that some piece of software they use doesn’t support svg or they just don’t know what it is. from my understanding ( i am likely wrong ) mobile platforms have less direct support for svg.</p>
