Complex animations are increasingly implemented in web pages and applications, and there are great libraries out there to help us do it, like GSAP and Anime.js. However, sometimes, even these tools aren’t enough. We want a more elegant and painless way to transfer motion from visual effects software directly to our web pages.
Today, I’ll explain the steps needed for incorporating Adobe After Effects animations into a page.
How This Works
Here’s the typical process to get motion graphics from Adobe After Effects to a format accepted by web pages and applications:
- A motion/graphic designer creates the animations in Adobe After Effects.
- They export the animation data as JSON files. This is achieved thanks to Bodymovin, an open-source After Effects extension created by Hernan Torrisi.
- A developer installs the necessary JavaScript for rendering the animations on the web. This is done with Lottie, a brilliant library written by the clever folks at Airbnb.
- Finally, they create instances for each desired animation.
Sound challenging enough?!
What We’ll be Building
As always, let’s examine what we’re going to build during this tutorial:
High Quality Animation With Lottie
To render After Effects animations in real-time without having to rewrite them, we’re going to take advantage of a library called Lottie.
Here’s its exact definition which is taken from its website:
“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 on the web!”
If you want to take a deeper look at (or get inspiration from) Lottie animations, explore LottieFiles.
Lottie for Web
Depending on the platform you target, there are different GitHub Repos with varying guidelines. In our case, we’re interested in web animations.
That’s quite enough preamble, let’s focus on our project!
1. Grab Some Motion Graphics
For this demonstration, we'll need a bunch of motion graphics.
I’ve chosen some animated icons from Envato Elements which are available in Adobe After Effects format.
From this pack, we’re going to use seven icons.
The next step is to export each of them as a JSON file. As we’ve discussed above, this process requires the Bodymovin add-on. Most of the time this job will be handled by a motion designer, providing us with the necessary assets for deploying to a web page.
As this tutorial follows a developer’s perspective, we won’t go through the export process. At this point, we’ll assume that we have at our disposal the following seven JSON files:
award.jsonsupport.jsoncoffee.jsonforum.jsonbulb.jsonclock.jsoncontact.json
As a Pro member on CodePen I’ll upload those files to the Asset Manager. All of them will share the same path.
2. Include the Lottie JavaScript Script
Coming up next, we’ll use cdnjs, a popular CDN service for including the required Lottie JavaScript file in our project:
3. Define the Page Markup
We’ll assume that we’re building a corporate website and are going to use six of these icons to highlight some key stats about the company. The seventh icon will be sticky and work as a call-to-action.
Here’s the required markup:
<section>
<div class="container">
<h1>...</h1>
<ul class="grid">
<li>
<figure>
<div id="..." class="animated"></div>
<figcaption>
<p class="counter">...</p>
<p>...</p>
</figcaption>
</figure>
</li>
<!-- more list items here -->
</ul>
</div>
</section>
<button type="button" class="contact animated" id="contact-us"></button>
Notice that some elements contain the animated class. Inside each of them, we’ll place one of the exported After Effects icons. This action will be done dynamically via JavaScript during the initialization process of our animations.
To associate elements with an icon, we’ll also give them an id whose value will match the name of the target icon, like this:
<div id="award" class="animated"></div>
4. Specify Some Basic Styles
For this demonstration, the styles won’t play an important role.
Just to make the page a little more attractive, we’ll use a custom Google Font and create a grid-based card layout.
Here are all the styles that we’ll need:
/*CUSTOM VARIABLES HERE*/
body {
margin: 50px 0 100px;
text-align: center;
color: var(--black);
font-size: 20px;
font-family: "Ubuntu", sans-serif;
}
.container {
max-width: 1000px;
padding: 0 15px;
margin: 0 auto;
}
.grid {
display: grid;
grid-gap: 50px;
grid-template-columns: repeat(3, 1fr);
margin-top: 50px;
}
.grid li {
display: flex;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: var(--lightbeize);
padding: 40px;
}
.grid figure {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid figcaption {
margin-top: 20px;
}
.grid .counter {
font-size: 50px;
font-weight: bold;
margin-bottom: 10px;
}
.contact {
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 0;
max-width: 80px;
}
@media screen and (max-width: 700px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 450px) {
.grid {
grid-template-columns: repeat(1, 1fr);
}
}
5. Load the Icons
To load the animated icons, we’ll loop through the .animated elements, and for each one, we’ll create an animation using Lottie’s loadAnimation() method.
Inside this method, we’ll pass a configuration object which controls the animation. Let’s take a closer look at the object parameters:
container: the DOM element which will include the animation.renderer: how the animation will be rendered on the web page. Possible values aresvg,html, andcanvas. In our case, the icons will appear as SVGs.loop: defines the number of iterations of the animation. Possible values aretrue,false, and a number. In our case, it will run indefinitely.autoplay: defines if the animation should start automatically or not. In our case, it should start automatically.path: the path to the corresponding JSON file. In our case, we’ll pass an absolute path. In your projects, you probably have a relative path, and all JSON files will live inside a common folder.
With all these in mind, here’s the required JavaScript code:
const animatedEls = document.querySelectorAll(".animated");
for (const animatedEl of animatedEls) {
const id = animatedEl.id;
lottie.loadAnimation({
container: document.getElementById(id),
renderer: "svg",
loop: true,
autoplay: true,
path: `${id}.json`
});
}
Depending on your project, you might want to perform some more complex actions. Just to give you a simple idea, let’s pause the animation by default and make it run when you hover over the icon.
The code for this operation:
for (const animatedEl of animatedEls) {
const id = animatedEl.id;
const animation = lottie.loadAnimation({
container: document.getElementById(id),
renderer: "svg",
loop: true,
autoplay: false,
path: `${id}.json`
});
animatedEl.addEventListener("mouseenter", () => animation.play());
}
Another common requirement is to run the animations only when they become visible to the user.
Conclusion
Re-making complex animations from scratch is a tough, time-consuming, and often inaccurate process. Thanks to Lottie, developers can precisely capture designers’ animations on the web or in an application.
Here, we walked through the process for moving some After Effects graphics from Envato Elements into a web page. This tutorial mainly targets developers, so we omitted the steps for exporting the graphics as JSON. This is something that’s certainly useful and worth exploring in a future tutorial (stay tuned for that).
Here’s a reminder of what we built:
To really understand the possibilities of this library and how it can help you, I encourage you to read the documentation on GitHub. In addition, take some inspiration from animations on LottieFiles.
As always, thanks a lot for reading!
Learn After Effects (Free Mega Course)
If you’re a web designer or developer, but you’d like to try your hand at creating animations for your projects, try our complete Adobe After Effects beginner’s course, for free!
No comments:
Post a Comment