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

Aug 12, 2019

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

GIFs
HTML elements with CSS
MP4
Hardcoded SVG with CSS — I feel bad for the devs who did this
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?

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

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

For web: https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.7/lottie.min.js
For Web, installing via npm: https://www.npmjs.com/package/lottie-web
for React: https://www.npmjs.com/package/react-lottie
For beginners who want to try out React: Click this link an old tutorial I followed a long time back and is still valid

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

Start and stop with select frames
A loop within a set of frames
Play reverse
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

Fyle Stories

Discussion about this post