You can create incredible animations with After Effects tutorials, but how do you add them to a web page? Now that’s another story. Without knowing the correct code, you’ll lose all your precious work.
Finding the right help for once is exhausting. When searching for something in a particular manner, most results are outdated or just plain wrong. If you’ve been looking for an easy way of adding Adobe After Effects animations to a web page, there is one simple solution. Read this article, and you’ll know exactly how you can do it.
What Is Lottie for Web?
Lottie for Web is an open-source library that allows you to import vector animations exported from Adobe After Effects into your web pages. It uses JSON as its data format, so it can be used with any programming language that supports this file type or can get translated into one that does.
How to Use Lottie for Web
Here is the process of using Lottie for Web:
Add script tag
You can add scripts and stylesheets to the LottieFiles component the same way you would add any other web content, including HTML, CSS, JavaScript, etc. To add a script tag to the LottieFiles component: select the script URL and add it to the top section of the page HTML or any other place.
Get the URL
You can skip to the next step if you’ve already downloaded and unzipped a Lottie animation. If not, you first need to download a Lottie animation. Once you’ve downloaded and unzipped your animation, go to the folder where it’s stored and open up the file called index.json. It is where all of the information about your animation is stored.
You’ll see a lot of JSON code inside the file, but what you are interested in are the URLs for each asset that makes up our animation. In this case, that means we want to copy over all of the image URLs and paste them into our HTML document to use them when we create our Lottie animations.
Ensure the Lottie-Player is pointing to the URL Side
This code lottie-player src=”<URL HERE>” background=”transparent” speed=”1″ style=”width: 300px; height: 300px;” loop controls autoplay></lottie-player> should be copy pasted to where you want it to be. Ensure the Lottie URL is in double quotes.
Configuring the Player
You need to configure the following:
Player Background: The player background is what will be displayed behind the animation. Your options are video background; it displays a video as the background for your animation and solid color, which displays a solid color as the background for your animation.
Speed: This setting determines how fast or slows your animation will play. You can choose from: slow-motion – Plays your animation at 0.1x its normal speed (10%) or average speed – Plays your animation at its normal speed (100%).
Loop: This setting determines if the animation will loop when it reaches the end of its duration or not.
Controls: The player controls are used to play and pause your animation and navigate through it. Click the triangle-shaped icon in the lower right corner of your animation to open up these settings.
Autoplay: The autoplay setting automatically plays your animation after it loads in the browser. To turn this feature on, check the box next to “Autoplay.”
How to Customize the Appearance
The player can get customized to fit your site’s design using Lottie.js, a JavaScript library included with the plugin. You can also add custom animations or even create your animations from scratch!
To customize the player’s appearance, you’ll need to add CSS rules to your site’s stylesheet. In the Appearance panel in WordPress Customizer, you can add them directly to your theme’s style.css file.
Can You Use After Effects In a Browser?
Yes. After Effects is a program that allows you to create motion graphics and animations. You can make anything from simple title animations to complex motion graphics and composite images with video and audio. The software is available for both Mac and Windows computers, but it also has a browser-based version that you can use on any computer.
Creating web animations is extensive. As the Web becomes a more advanced platform, designers and developers create and add new technologies. One of those technologies is Adobe After Effects animations. The beauty of using these animations online instead of on a video service like YouTube is that you can capture user attention in ways that previously wouldn’t be possible.
