How did we optimize for 65 animations on a landing page

It’s one thing to create 2 or 3 animations for a webpage and another to create 65 animations while taking care of multiple iterations, and complete reworks. Here is a short Medium Post on how we went about creating it.

1. Create a structure

When I started by reading descriptions for the animations, I quickly realized that there will be a vast repository of files. To repeatedly use these files, it was very important to create a proper filing system and a structure.

I found Google Sheets to be the easiest way of bringing structure for all the animations. In one sheet, I wanted to ensure that we have a complete summary of all the animations. At any point in time, one could look into the sheet and figure out if the animation is completed or pending.

2. Name the files correctly

It was important to ensure that files were not jumbled. For this, we had to make sure that we had a system to name the files correctly. Usually, I just name the files with whatever actions they perform. But, when you’re dealing with multiple animations, this is no longer a sustainable option. So, I went about creating a system on how I named the Illustrator files and Lottie Files for animation.

“Names have power.”
― Rick Riordan, The Lightning Thief

3. Templatize Illustrations

Bringing in structure with naming files and Google Sheets is good. But the real sauce is the animation. Maintaining consistency among all the animations was a non-negotiable. Our idea behind creating these animations in the first place was to educate the user about our product and the kind of features it offers. We decided to create low fidelity illustrations of the screens and make distinct animations only for the main page as we wanted these to stand out. But even while giving it a unique touch, we ensured that they still resemble to design of other animations.

4. Animation Timing

When you’re dealing with animation, the consistency just does not stop at designs but with animation speed as well. It was essential to ensure that the timing for actions across all animations is the same. If you notice, the speed with which the cursor moves in all the animations is the same. This is true for every other component of the composition as well.

5. File Size

While we were excited to add animations to all our landing pages, we were also concerned about the file size of these animations, and how they could potentially affect the page speed. That’s exactly when we found out about Lottie!

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and the web!

To simplify the jargon, if you want to add animations to your website or mobile application, all you need is Adobe AfterEffects & Bodymovin plugin.

“With great animations comes a great file size”
- Someone who never used Lottie

Overall, animations are a great way to engage and educate your users about your product. It may be a little time-consuming to create animations from scratch but with the plethora of tools available today, it is very easy to create and add animations to your website or mobile application.

Throughout building the landing page, I worked along with Anoop, who is the Design Lead at TapChief.

If you are planning to add animations to your project and need help, feel free to reach out to us.

Did you know that you could give up to 50 Claps to this Medium article? 👏

Hold the button for a few seconds. Try it out!