– How to use Astute Graphics plugins to create a mobile-friendly animated SVG.
15 minute read
This is a quick tutorial on how to create mobile-friendly, vector-based animations like the one below.
“Why?”
We are currently living in the “mobile-first era” of the internet, which means whatever graphics we create need to be made with data consumption and mobile performance in mind. In order to best meet the technical needs of mobile-devices, the quality of graphics has traditionally suffered (low quality GIFs; bloated videos that don’t autoplay; stiff, manually-coded CSS animations; etc). But animation, art, and code are inching closer and closer together. The increasing overlap between these fields means we are able to create ever more dynamic and visually-appealing graphics that are still lightweight and mobile-friendly.
The Setup
Required plugins and software:
– Adobe Illustrator
– Adobe After Effects
– Overlord
– Keyshape App (currently for Mac only)
– Bonus: A codepen.io account
The Artwork
Step 1: Rough Sketch
Rough out your initial sketch however you are most comfortable. You can do this in your favorite mobile tablet sketching app, with pencil and paper, or you can do this directly in Illustrator with the Dynamic Sketch or InkFlow AG plugins. When you’re finished, set this as an embedded image on its own artboard in Illustrator.
STEP 2: VECTOR SHAPES
Lay out your basic vector shapes on top of your sketch using the InkScribe tool. For anyone who prefers a more traditional drawing experience, you can also “ink over” your sketch using the Dynamic Sketch tool and join your line work into paths with the Trim and Join function (with Dynamic Sketch selected, press and hold the Shift key). You’ll be able to adjust the stokes and fills after you are done.
STEP 3: FINAL VECTOR ART
Add remaining details, highlights, and shadows. You can also make use the Extend Path tool (VectorScribe) to make sure all minor details are properly placed and aligned.
Then group your artwork according to how you would like it to be animated. For example, all elements of the head would be grouped together, all elements of the arm grouped together, and so on. Also be sure to name your layers and groups in a way that makes them easy to identify.
Pro Tip: Using the Super Marquee Tool can be an absolute life saver when grouping your work together.
When you feel your static vector image is finished, please save the AI file and also export an SVG of the image. This SVG file will come in useful later if you’ve used any elliptical gradients in the creation of the artwork.
THE ANIMATION
Step 4: Import Vector Art to After Effects
Open a new project in After Effects. Set the width and the height of your After Effects project to match the dimensions of the Adobe Illustrator artboard, on which your flat art is placed.
With both your flat art open in Adobe Illustrator and your new project file open in After Effects, navigate to Illustrator and select all artwork. Open your Overlord plugin under Windows > Extensions. Click the upward facing triangle icon on the Overlord plugin tool panel. This will push your artwork to After Effects and automatically populate it in your After Effects project.
From here, you can parent the layers of your composition as normal. If you’re not familiar with parenting in After Effects, you can get a brief overview from this quick tutorial here.
STEP 5: PATH ANIMATION
The real power of combining the Astute Graphics and Overlord plugins occurs in manipulating path shapes.
A lot can be achieved with applying simple transforms and rotations to individual layers, but the ability to reshape the vector paths themselves creates an animation that looks and feels much more like traditional animation. And because we’re working with vector paths, we’ll be able to export these more traditional-looking animations to web and mobile-friendly SVG animations.
The problem with After Effects is that it isn’t very efficient for creating or editing vector paths. If you open the Overlord panel in After Effects (Window > Extensions) you will be able to easily toggle back and forth between After Effects and Illustrator, effectively turning Adobe Illustrator into an “vector editing panel” for your After Effects project. Best of all, you’ll be able to utilize the Astute Graphics suite of plugins to create and edit these vector paths, making your workflow more efficient and your animations more dynamic.
Let’s say I would like to apply a simple animation to the mouth of one of my characters. I could apply an x and y axis transformation, and maybe use a slight amount of rotation. However, it would look far more natural if I could actually alter the shape of the path itself.
First, I move to the Timeline panel and twirl down the “mouth” layer until I reveal “Path.” Then click the little stopwatch icon to create a keyframe.
Next, I move the animation forward by one second.
STEP 6: BRIDGING AE AND AI
From within After Effects, I make sure the “Path” attribute is still selected and then click the toggle button in the Overlord panel.
Once back in Illustrator, I find my original artboard, toggle off the visibility of all existing artwork, and create a new layer. Remaining within Adobe Illustrator, I locate my Overlord plugin and click the “pull” icon.
This places my mouth path on my artboard within Adobe Illustrator in the exact same position that it can be found in my project in After Effects. Now I am able to use the full suite of Astute Graphics plugins to reshape my vector path.
STEP 7: RESHAPING THE PATH
I edit the mouth shape to look like the bottom lip is receding and the top lip is coming forward, while the entire mouth closes and shifts upward slightly. Once I am satisfied with the shape, I navigate back to After Effects by once again clicking the Toggle button in the Overlord plugin. Once in After Effects, and with the Path attribute still selected in my Timeline, I click the Pull button from the Overlord panel. I then see a new keyframe created in you timeline with the newly shaped path.
I hit F9 to add some Easy Ease, just for good measure.
One particularly useful tool in this AE to AI workflow is the Reposition Point Tool. Sometimes creating an animation by keyframing between two shape paths can create an odd-looking result, despite the vector shapes at either keyframe looking correct. Very often this is the result of a point along the path being forced to move too far between keyframes. In the example below, you’ll see a single animation occurring between two keyframes. The starting position and ending position of the individual points (highlighted in green) on the path creates an odd ripple effect at the bottom of the mouth shape.
Changing the First Vertex can help — but sometimes this just doesn’t fix the problem. I’ve changed the first vertex in the example below. This corrects the ripple effect at the bottom of the mouth, but creates another ripple effect above the mouth.
In certain cases, one needs to place the point in a different location along the path. This usually means redrawing the entire path. However, the Reposition Tool from Astute Graphics enables you to slide a point along the edge of an existing path, preserving its shape.
Continuing with the example from above, I’ve used Overlord to bring the mouth shape back into Adobe Illustrator. I then shift two of the points on my existing vector path, and then push that shape back into After Effects (again, using the Overlord plugin). This corrects the ripple effect in the animation. No tedious redrawing of vector paths necessary.
THE IMPLEMENTATION
STEP 8: EXPORTING THE FINAL ANIMATION
Once the animation is finished in After Effects, it’s time to export the animation to a web-friendly format. For this I use the Bodymovin plugin. To download Bodymovin and to get a quick overview of how to properly install and use the plugin, please navigate to AE Scripts.
The Bodymovin plugin exports what is known as a “Lottie animation” — which is actually just a .json file that contains a particular kind of animation. This file could be used as a finished animation, but properly implementing the animation requires a little knowledge of code. If you would like to simply use the Lottie file, but have limited knowledge of code, you may find the website LottieFiles.com to be quite useful. Here you can upload your Lottie animations and will find a simple user interface that makes implementing your Lottie animations far easier.
However, I’ve chosen to convert my Lottie animation to an animated SVG file. To do this, I open my Keyshape App and import my .json file directly into the program (File > Open > Select JSON file).
Once I’ve opened my JSON file, I locate the static SVG file I exported from Illustrator (Step 3) and open it in Keyshape, as well. The reason for doing this: transferring vector art from Illustrator to After Effects will remove any elliptical gradients you have in your artwork, converting these to purely radial gradients.This can drastically alter the look of the finished image. However, these elliptical gradients are preserved in my exported SVG file.
Once I open my static SVG file in Keyshape, I locate the path that contains the elliptical gradient. I then copy this path to my clipboard; navigate back into the open JSON file within the Keyshape app; select the corresponding layer with my direct selection tool; and paste my copied path directly on top of the radial path. I then use the Align tool to properly place the pasted path. I then delete the original path containing the radial gradient, leaving only the elliptical gradient.
The animation will now play just as it did in After Effects, except it will now do so with the correct artwork, which contains the elliptical gradient path.
Last, I export the animated SVG as a KeyshapeJS animation. I now have a lightweight, mobile-friendly, high-resolution animation.
Just for the sake of comparison, when this animation is reduced to a width of 760 pixels and exported as a GIF, the file is 5.2 MB. The animated SVG version is 2300 pixels in width (which means it would display just fine on a desktop computer) and is 329 KB in total file size (which means it’s a lot friendlier to viewers on a mobile phone).
In short, the SVG preserves the quality of the image better than the GIF and is —visually— about 300% larger than the GIF, despite the total file size of the SVG being 94% smaller than the GIF.
STEP 9: ONE FINAL NOTE
Depending on your content management system, you may have to enable SVGs for your website. In Wordpress, this can be achieved with a plugin.
It also may be the case that you cannot add your SVG animation directly to your website as an image. With Wordpress, for example, you will have to upload the SVG to your media library, copy the file location, and then paste the URL within an <object> tag (normally images are placed within an <img> tag.
If you’re unsure of how to place your SVG within an <object> tag, please refer to the CodePen link below.
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="430" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/jeffreylkarl/embed/jOMZJbB?height=430&theme-id=34894&default-tab=html%2Cresult&user=jeffreylkarl&slug-hash=jOMZJbB&pen-title=Astute%20Graphics%20Animation%20(SVG)&name=cp_embed_1" title="Astute Graphics Animation (SVG)" loading="lazy" id="cp_embed_jOMZJbB" style="box-sizing: border-box; width: 730px; overflow: hidden; display: block;"></iframe>
</code></pre>
A Guide to Lottie Framework: 5 Steps to Create an Animation
12 min read
/ 22320
Published: Dec 20, 2018
/ UX/UI Engineer
Meet Lottie Framework
Imagine it’s Monday morning. You wake up and grab your phone to check your Twitter feed. You scroll and scroll – what’s that? Oh, news from NASA. “Like!” And then you suddenly see that the heart-icon has not only changed, but did so gorgeously.
At first, it may seem like nothing. But the truth is, small animations in the interface can make a big difference. When you use a certain app and you know for sure it has reacted to your tap, it means the design was well thought through. The app creators not only made it practical, but also attractive and pleasant to use. And it’s true –animations add uniqueness and mood to an application. Those of you who’ve ever tapped “Heart” on Twitter know this feeling – you simply go “Aaawww!”. Such a reaction proves how important animations can be in an interface. With tiny animations like this, users can’t help but like your product. On top of that, they’ll better understand what’s going on inside the app and how to interact with its interface.
Now imagine you’re a designer who wants to use animation in an app. You must be thinking, “God, this looks so complicated, it’ll take me ages to learn all the tools and understand all the nuances…”. In my experience, these are the questions most newbies ask:
- Where do I start?
- Where do I get drawings I can use?
- I’m not a programmer! Do I have to learn coding?
- How do I optimize the animation so it works smoothly?
- Can I test the animation on a real gadget?
- What do I have to tell the developer so my animation will look the same as the design?
- I always wanted to make an animation! Will I be able to do it?!
If you answered “Yes” to at least a couple of these questions, then you definitely have to try Lottie, a library developed by the design department of AIRBNB, that parses animations from Adobe After Effects using Bodymovin and renders native animation for mobile phones and web device. Let’s take a look at how to make an animation using Lottie framework. We’ll go through all steps of the creation process so you can better understand what to do, and when.
Creating an Animation: The Process
Before you can enjoy all of Lottie’s features, you have to prepare resources and create an animation in After Effects. And because these are the most time-consuming and laborious parts of the process, let’s take a close look at what’s waiting for you and what difficulties you may encounter. Lottie animation development consists of these steps:
- Preparing resources to import into After Effects
- Creating animation in After Effects
- Exporting the JSON file with the help of the Bodymovin plugin
- Creating a project in xcode and connecting it to the Lottie framework
- Viewing and testing the animation on a device
Next, we’ll take a closer look at each of these steps.
UX/UI developmentCreate a stunning interface of your product.
1. Prepare Resources to Import Into After Effects
To create the animation, we’ll use the original logo file, prepared using Adobe Illustrator. When we save it correctly, we’ll have access to additional animation options, and we’ll be able to fully control export options. We’ll also place the objects in After Effects the same as we do in Illustrator, and save the structure and the layer titles.
Note: be diligent and orderly with the layers before saving. A well-prepared original of the design, with the right naming and layer order, will save you a lot of time at the next stage – creating an animation with After Effects.
Another important feature: you’ll have access to the Trim Path feature in After Effects to animate image contours (this feature is especially useful when you animate linear icons). When saving the Illustrator file, pick the AI-format.
When importing the file into After Effects, be sure to choose Retain Layer so that layers won’t interlace during the import. Then you’ll be able to animate them one by one.
After importing your graphics into After Effects, you should be looking at something like this:
As you see, the original shapes lack sharpness around the edges. But after you import vector images into After Effects, the edges will be smooth, without the extra pixels that make the image look blurry. To get vector images you can edit directly in After Effects, select all the Illustrator layers, right-click them twice and choose “Create Shapes from Vector Layer” in the menu, as shown below:
From now on, After Effects will create shapes and hide Illustrator layers. When creating shapes out of imported graphics, you can use the Expload Shape Layers plugin, which allows you to significantly speed up the process. This way, you’ll see improved sharpness in your animation elements right away.
If you need to export an original from Sketch, use the Sketch4AE plugin. Сompared to Illustrator, Sketch is faster when it comes to preparing materials. Personally, I prefer Illustrator, as it transfers parameters of vector shapes more precisely. Its settings are also more flexible. However, you can work on your graphics in Sketch. As soon as you’re happy with the final version, transfer it into Illustrator.
2. Creating Animation in After Effects
Now that you have imported your originals into an After Effects project and are ready to go, you must be eager to know when you can start working with Lottie. But before you get your hands on your animation, it’s important to remember that:
- Before starting a project, always download the latest version of Bodymovin and check GitHub to see what features aren’t currently supported.
- Lottie restrictions are described at Supported Features.
- Composition support in Lottie is very poorly realized, so try not to use it at all. Alternatively, you can merge all the layers into one composition at the final stage of animation development.
- Don’t use expressions while developing an animation. Calculating expressions in each frame in a browser is a resource-intensive process. On a mobile device, where frame rate is over 60 fps, it’s especially difficult to calculate.
- Use as few dots per inch as possible in masks and key frames in those masks. They increase the file size substantially.
- Plan your animation at the start and use simple effects such as position, scale, opacity, rotate, etc.
- When creating an animation, set the frame rate that’s best for you. It doesn’t necessarily depend on your personal preferences – I use 60 fps, so that the animation will run more smoothly on mobile devices.
In the Project tab on the left, you’ll see a composition with the same name as your Illustrator file. Double-click the composition to open layers in a tab with the composition name and time scale.
When creating your animation in After Effects, keep in mind where it’s going to be used and how it’s going to look among other animations used in the interface. Animation is not only functional; it also creates a certain mood within an app or website. Which means you have to think about the big picture beforehand. Creating a storyboard with the animation’s key frames is a great way to plan the final result, avoid inconsistencies, and divide complicated animations into simple components.
3. Exporting JSON Files Using the Bodymovin plugin
After finishing the animation, use the ZXP Installer to install the Bodymovin plugin and save your animation as a JSON file. After installing it, go to Window > Extensions > Bodymovin. In an open window, choose a composition to render, the file path, and saving options in Settings. Before you click Save, make sure that Allow Scripts to Write Files and Access Network is ticked in the After Effects settings.
Depending on the results you’re trying to achieve, you can choose different saving options, which are described in detail here.
Done! Now, you can use the JSON file of your animation. Let’s see how it’s going to look on a real device or emulator. To do so, we’ll create a project in xcode and connect the Lottie animation framework.
4. Creating a Project in Xcode and Connecting Lottie
Let’s create an iOS project that will allow us to check the animation in the emulator or on a connected iPhone. There’s a detailed Lottie animation tutorial on how to add the framework and the JSON animation file on the official Lottie website and on YouTube ?. As per the instructions, we will create a project in xcode, and to test the animation we’ll add a slider that controls the playback progress.
Now you can smoothly change the animation, frame by frame, and thoroughly check the result. To separate the animation testing and playback of the final version, you can comment on two lines:
slider.addTarget(self, action: #selector(onSliderCharged(sender:)), for: .valueChanged)
and
animation.animationProgress = CGFloat(slider.value)
…and uncomment
animation.play()
At this point, you can watch the animation on a Lottie animation viewer at normal speed (1x) and on repeat – just as it will look in the finished app.
You can download the project file from GitHub and take a closer look at the code, as well as leave comments about how to improve the test project.
Depending on the kind of animation you want in your interface, you can add reactions and animation controls using button, gestures, or something else. You can manipulate the animation’s playback and triggers, speed and other features. There are countless ways to trigger and control animation; it all depends on how much time you have to make sense of xcode. ?
5. Viewing and Testing Your Animation on a Device
Congrats! Now, you can view your animation on a device or emulator. You have several options:
- Download the Lottie Preview mobile app and use the QR code.
- Drag & drop your JSON-file into LottieFiles.com and scan the QR code on the screen. The file you drag & drop will be available only to you. You can enable access to it for trusted users.
- Connect the xcode file to the project.
- Use another option described here.
Now you can see what your animation will look like when it’s integrated into an app, see how it runs, and get the results you want after a couple of iterations. If you want to change something, you can…
- change the animation in After Effects;
- save the JSON file with Bodymovin; or
- refresh the JSON file in the xcode project.
If your result doesn’t match your design in After Effects, you may have used a parameter that doesn’t support Lottie. To quickly identify what causes this, test parts of the animation one by one.
As soon as you’ve finished testing the animation on a device and setting the playback settings, you can give the JSON file (and the xcode project file, if necessary) to the developer. Also, you can provide them with the animation video.
To test the animation on the Web, you can use built-in browser tools that show you how fast the animation loads and what the playback parameters are. For mobile, you can use xcode’s built-in debugger and test the animation on real devices, or on an emulator where you can choose the required iOS and device.
What Makes Lottie Great?
First and foremost, using Lottie for animation will not just help you make your product unique, but also give your users an improved UX. Developing it in After Effects will allow you to create your animation exactly the way you imagined it and test it before embedding it into the code. Lottie is an open-source library, developed by the Lottie community. On top of all this, you can modify the animation and test the viewing experience across different devices during the development process, independently from the mobile developers. Besides, the library is very lightweight, which is why it quickly loads to apps and websites. It’s universal and can play animations on various operating systems with limited resources, which is why it can be played even on slow-performing devices. During the development process, you will notice how easy it is to generate a new version of an animation and add it to the project. Consequently, you can focus on animation design, and not on the tool it’s being done with. After just a couple of iterations, you’ll have set it up exactly the way you wanted it from day one. And when it’s done, all you have to do is pass playback parameters to the developers. The Lottie library is super adaptive, and you can change many parameters of animation elements. It supports the Alpha channel; in my opinion it’s better to use transparency with SVG elements than MP4 video or GIF because the SVG smoothing quality is much better. Besides, if you realize your animation as a GIF, its size can be a lot larger than the identical file in SVG. By the way, an animation created with Lottie is more than just animation. Since the library is built on JavaScript, you can add a bit of magic to your product by making the animation interactive. Moving the mouse or scrolling the page are just a few of the many ways that interaction with an animation can be used. And last but not least, you don’t have to worry about how it will look on different devices – your animation will look good on any screen, regardless of pixel density and resolution. All of this gives you an excellent opportunity to develop not just a mobile app, but a unique product brimming with character and style. One that will stand out from the competition, win your users’ hearts and improve their user experience.