Matt Wetmore

Senior Director, Web Operations

Matt is the Senior Director of Digital Marketing at Acquia, working to establish the vision and strategy of Acquia's websites. He has over 15 years of experience building and maintaining websites and over 10 years of experience with Drupal.  He joined Acquia in July 2019, and quickly went to work implementing process improvements, coordinating enhancement releases and building a high performing team that can consistently deliver. When Matt isn't working or spending time with his wife, he enjoys volunteering with the Drupal community, building personal websites, taking care of his yard and spending way too much money on Lego sets.

Introducing Lottie Files: An Animation Revolution in Web Design

June 9, 2023
5 minute read

Imagine a world where animations are lightweight, scalable, and easy to implement on your website. Well, that world exists, thanks to Lottie files! In this blog post, we'll explore:

What Lottie files are
The benefits of using them
Ways to create and customize Lottie animations
How to use Lottie files in a Drupal website

By the end, you'll be eager to dive into our tutorial on adding Lottie files to your Drupal site.

What are Lottie files?

Lottie files are a popular and lightweight file format for vector animations that can be easily scaled and used across devices. They are based on JSON data and created using Adobe After Effects, enabling smooth and high-quality animations to be embedded within websites and mobile apps.

What are the benefits of using Lottie files?

The benefits of using Lottie files are that they are scalable and resolution-independent. This means that they can be resized without losing quality, making them ideal for use on a range of devices and screen sizes. Additionally, Lottie files can be easily edited and updated, which makes them a cost-effective solution for businesses and organizations that need to make changes to their animations over time.

Compared to traditional animations(like GIFs and short looping videos) Lottie Files win in a number of different ways and integrating them with your Drupal site is easy!

Feature	Lottie Files	Traditional Animations
File Size	Small	Large
Scalability	High (Vector-based)	Low (Raster-based)
Performance	Optimized	Can be resource-heavy
Customization	Dynamic and easy	Requires re-rendering
Integration with Drupal	Simple, using modules	More complex

How to find or create Lottie files

So you're looking for some Lottie files to spice up your Drupal site, but where do you find them or how do you create them? Let's dive into the world of Lottie and explore different ways to find or create these captivating animations.

Finding Lottie files

Now that we've covered the basics of Lottie files, it's time to dive into the world of finding and using them to bring some life and sparkle to your Drupal website. There are various sources for obtaining high-quality Lottie animations, both free and paid. Let's explore some of the popular platforms.

LottieFiles: As the name suggests, LottieFiles is a dedicated platform that offers a vast collection of animations created by talented designers. It allows you to preview, edit and download Lottie files, as well as share your own creations with the community.
IconScout: IconScout is another great resource for finding Lottie animations. They offer a curated selection of high-quality, responsive, and fully customizable animations that can be easily integrated into your projects.
MotionElements: MotionElements provides a great inventory of Lottie animations that are nicely organized by category and allow you to purchase specific animations for a reasonable price.

When choosing Lottie files, it's important to consider factors like licensing, file size, and compatibility with your Drupal website. Always ensure that the animations you select are optimized for web performance and follow the guidelines set by the platform you're using.

Creating Custom Lottie Animations

So, you've decided to take the plunge and create your own custom Lottie animations. That's fantastic! Having a unique animation that matches your brand can elevate your website's user experience to new heights.

But, what's the actual process of creating these Lottie files?

The Lottie File Creation Process

Creating Lottie files typically involves two main steps: designing the animation and exporting it as a Lottie file. Designers usually use Adobe After Effects to create the animations, thanks to its powerful tools and features.

Once the animation is designed and ready, it's time to export it as a Lottie file. For this, you'll need the Bodymovin extension, which can be installed directly into Adobe After Effects. This plugin will convert your animation into a JSON file that can be easily integrated into your website.

How to use Lottie files in your Drupal Website

Adding Lottie animations to your Drupal website can greatly enhance the user experience and visual appeal. To get started, you'll need to install and configure the necessary modules, such as the Media Entity Lottie module. Once installed, you can upload your Lottie files and implement them within your site's content using various methods, like WYSIWYGs or Media Fields.

Ready to dive into the details? Check out our step by step tutorial!