According to different studies, UI embellishments like animation can produce a positive impact in the overall user experience. Animation is not only fun, but also engaging.
Since animating assets using Javascript or CSS may result intimidating for many designers, this is where Lottie comes into rescue.
What is Lottie?
Lottie is a tiny JS library that provides web designers the ability to integrate Adobe After Effects compositions into the web. Web designers from the early 2000s might be familiar with key frame animation techniques as they existed in Macromedia Flash. If you don’t know After Effects, the way how static assets are animated is more or less the same. Lottie lets designers think less in code and more in the creative process of how things come and go.
A Lottie animation made with After Effects will result in a lightweight file. The final size is 600% smaller compared to a file in GIF format. It will also look crispier an it can have more complexity as it can react to different states (on hover, click, etc).
According to its official website, many of the top 500 apps on the App Store use Lottie to engage users and boost their conversions.
So let’s get started and see how it works.
Getting the assets ready
When using Adobe Illustrator to produce the graphic assets for the animation, the first step is to make sure all the individual items that are going to be animated are in different layers. This will make things easier later when working with the Adobe After Effects composition.
After Effects Flow
Once the AI file is ready, it’s time to make the magic of the animation happen. I personally export the file as a composition, retaining each of the layers’ sizes.
Another great tip I found on a YouTube tutorial is to convert all the AI layers into After Effects paths. This will help in reducing the final file size and make the animation look sharper and crispier.
Once done with that, it’s important to remove (or hide) the original AI layers as they will be duplicated. The rest is up to you, you can unleash your creativity by making fun and visually striking animations.
Exporting the final result
The LottieFiles plugin for After Effects is required to export the final result as an embeddable animation. It can be downloaded either manually or from the Adobe Creative Cloud app itself.
To avoid the final result ending up not as expected, it is recommended to run an early test as soon as some progress is made. In my personal experience, I found that there were some problems when working with masks. In case you run into issues, early tests will help you reformulate the animation technique before you end up wasting time.
When the animation work is done, the final result can be embedded either on the web or a prototyping software like Figma or Adobe XD. For the latter use, a Lottie account is required, as the file needs to be accessed from the Lottie servers. On the export dialog, you can choose to make the animation private or public (accessible to all the Lottie community). Both options are free.
To embed the file on a web page, the Lottie library is needed to be loaded within a script tag. For a quick test I fetched the script from the UNPKG CDN:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
The next step is to include the animation itself using the <lottie-player> tag. For this case, I’m using the private hosting options provided by LottieFiles.
<lottie-player src="https://assets10.lottiefiles.com/private_files/lf30_iythdp9n.json" background="transparent" speed="1" style="width: 600px; height: 600px" loop autoplay></lottie-player>
This method makes the animation available to be used not only on the web, but also on XD or Figma mockups with the LottieFiles plugin installed.
Conclusion
Animation is a fun and engaging way to make a delightful user experience. LottieFiles is a great way to make use of existing animation tools like After Effects to leverage its potential on the web. This workflow, unlike JavaScript and CSS animation, require zero to none knowledge of programming.
Further reading
NN/g, Therese Fessenden, A Theory of User Delight: Why Usability Is the Foundation for Delightful Experiences
EL Passion, Ela Kumela, Lottie, Who?
CSS-Tricks, Idorenyin Udoh, Animating with Lottie