SVG Animations are all the rage - So let's Create one

Over the years we have seen a lot of animation formats trying to take over landing page animations and product mockup animations. GIFs because of their size offered more bang for the buck. GIFs are still not that great on the landing page, because of their frame rate and jittery color accuracy.

Then came MP4 videos that replaced the GIFs on the landing page. It required a special player that was heavy in package size and its file itself was heavy too. So people had to resort to a higher quality of 128 bit GIFs, which are again heavy boys.

Here are the web animation methods used until now

  1. GIFs
  2. HTML elements with CSS
  3. MP4
  4. Hardcoded SVG with CSS — I feel bad for the devs who did this
  5. SVG animation with the help of frameworks & online tools like — GSAP and SVGGator
But none of these were smooth and crisp enough to be used on the hero page. All of these would make the page look el-cheapo and nobody wants that

Enter the world of SVG animations created with LOTTIE

Lottie is an SVG animation framework developed and maintained by Airbnb. Which helps you to take the vector animations that you created in After Effects and export them and use them as web animations directly on the web.

The good part is that the vector animation file is just a JSON and is just a few KBs in size.

So what are all the things that make Lottie a good alternative

  • Animations rendered right out of after effects — Yep!
  • Scalable to any size — duh, we’re animating vectors here
  • Smooth Animations that can be used for micro-interactions
  • All SVG and CSS animations in a JSON file
  • File sizes are extremely small
  • No CSS skills needed — Needs JS package to run it
  • Developed and supported by Airbnb

So, Let’s create a Lottie Animation super quick

What are we going to do now?

  1. Get to know how Lottie's workflow
  2. Create animation with After Effects
  3. Export it as a JSON with "BODYMOVIN" plugin
  4. Embed that on a webpage

How it works

The animations that are developed in Adobe After Effects tool should be converted into JSON file using the BODYMOVIN plugin. Then through the help of Lottie library, we can use animation JSON file in Android, IOS, React-Native, and Web.

You can either create your animations with Bodymovin in Adobe After Effects and export them to JSON file and render it inside your app with Lottie or just use a pre-made JSON animation files and use it directly in your app without even touching or writing even a single line of animation-related code in Adobe After Effects.

Animation with After Effects

Of course, you can design complex vector graphics with Illustrator and then import it to After effects but to make this article crisp we are going to stick with just a button, circular progress, Check circle with animated paths, on click of a button.

Since I am creating this animation for FYLE- that company I am currently in. I am going to create a form to submits expenses for reimbursement. — that’s what the product is — in short

Creating a loader for a button saying Fyle it! After clicking the loader spins and then ends with a tick sign

  • Let’s create the loader in after effects, starting by creating a circle shape — with no fill
  • Add the trim paths property to have control the start and stop points of the stroke path
  • Set the start and endpoints on the to zero at the beginning of the timeline and click the stopwatch icon
  • Hurray! you have created a keyframe
  • Move sometime in the timeline and create another set of keyframes by changing the trim paths value — after-effects will automatically create the keyframe for you — in our case, this value is (100% and 87% @ 1.16 seconds)
  • Now create a set of keyframes that would with values of your choice in between the previous values, this will give an indeterminate effect to the rotation — in our case it’s (34% and 67% @ 0.22 seconds)
  • Now we are almost done with the circular progress, Create a duplicate (will use this later) and right-click on the duplicate and make a composition by selecting the option“precompose” and giving it a name
  • Crop the newly precomposed composition to the total length of the circular progress in the timeline (1.06s in our case)-  Right click on the composition from the project panel and change the time this should do the time cropping
  • Select the composition and Right click> Time>Enable Time remapping
  • Hold ALT+Click on the “stopwatch” icon and it opens a menu, click the arrow icon and select “LoopOut” as given in the image below, no need to give any additional options


  • You can extend the composition as per your requirement and you will see itself looping out till the point of your extension
  • Move the start of the shape layer (the original one we duplicated off) to the end of the precomposed composition
  • Now Let’s make the tick of the loader, First, we have to open the circle into a Bezier curve. How? Select the shape layer>contents>Ellipse path > Right-click > Convert to Bezier path
  • Now create more points on the curve using the pen tool
  • Select two points where you want to start the tick mark select Layer > Mask&Shape Path > Closed (uncheck it)
  • Now manipulate the spline to create a tick at the end
  • You now have to play with the trim paths to get the full tick stroke just like how you did for the circular loader again.
  • You can add a bit of rotation and play more with the key frames and.... That’s it you now have an animating success loader.

Export it as a JSON with the  BODYMOVIN plugin

  • To export the animation we have just made, you need to get the plugin from Adobe Exchange. Once you select it, you should see the installation confirmation from the CC within a few minutes
  • Open Windows>Extensions>Bodymovin and you see this window
  • Select the composition and the folder path you want to save and click render
  • That’s it! You now have all your animation in a JSON file (I’ve named it Loader.json)

Let's use the loader animation we created on our webpage for a micro interaction

  • Create a web page and import Lottie file in the index.html file.
Here I’m going to write code in React.js because that’s what i’m used to these days
Heck, there’s even an npm package called “react-lottie” to make things confortable but it’s the same irrespective whether it is HTML component, React or Angular


  • Add some CSS for the Textfields and Buttons just to make it look good

The code below is all it takes for Lottie

If you want the full code with added conditions and stuff here is the Github link https://github.com/adisrini1103/SVG-animation-react

First, you initialise the params required for the file — this should include the

Loader.json we got from “bodymovin” plugin

var newoptions = {
loop: true,
autoplay: true,
animationData: Loader //This is the json file imported
}

Then add the Lottie component that is imported

<Lottie
options={newoptions}
height={50}
width={50}
isStopped={this.state.isStopped} // animation stops when true
isPaused={this.state.isPaused} // animation pauses when true
/>

Once you add include the Lottie to your app component you can view the animation.


Other things you can do with Lottie

  1. Start and stop with select frames
  2. A loop within a set of frames
  3. Play reverse
  4. select which frames to show, based on interaction (extremely useful for swiping interactions)

Is There Any Severe Impact Of Lottie On-webpage size!

The answer is simple-No, The JS package is just ~270KB. Gzipped should be 80KB. When the animation is clean without unwanted shapes, there should be no problems with SEO

Some Good Practices

  • Do not extrude shapes into 3D in illustrator, it will create many shapes and make the file heavy — Instead shear and rotate to make 3D illustrations
  • Avoid using raster images
  • Avoid using Libraries
  • Always ease your transitions
  • Be very minimal with physics
  • Make nested reusable compositions
  • Try to create as many vectors and masks in After Effects
  • Fill gradients in After Effects and not in illustrator (AE cannot import gradients and shadows from Illustrator)

Output — This is SVG animation shown as a GIF (What a pity), Hope medium gives support in the future

TL;DR

We have learned how to create an animation in After Effects and use in a webpage as an SVG animation using Lottie. Hope this helped.

GitHub Link: https://github.com/adisrini1103/SVG-animation-react

Aditya Srinivas

Read more posts by this author.