How to Lotify?

Sam Prince Franklin K — Sat, 08 Jan 2022 03:30:39 +0000

What is Lottie?
A Lottie is a JSON-based animation file format that allows designers to distribute animations on any platform just like static assets. They are tiny files that can be scaled up or down without pixelation and operate on any device.

You have a Lottie or dotLottie format file. Let's get started on incorporating it into your website. This method may be applied to any webpage, blog, or platform that allows you to modify HTML.

Insert a script tag into the LottieFiles web player component:

LottieFiles maintains the lottie-player> web component, which allows you to simply put a Lottie player anywhere else on your webpage by utilising our unique web component. To include the web component, copy the script URL for the player and paste it into the head> section of your page HTML (or anywhere on the page).

This is how your workspace of lottifiles looks :)

By clicking, you will get the above interface where you get the JavaScript code for the above animation made using Adobe After Effects.

Sample :

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_kyu7xb1v.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

Editing your HTML file with the JavaScript block from the Lottiefiles :

Here below, I have added the Lottifiles script in the Line 64 & 65

So by this way, you can add Adobe After Effects animations to your Webpages :)

DEV Community: Sam Prince Franklin K

How to Lotify?

Insert a script tag into the LottieFiles web player component:

Editing your HTML file with the JavaScript block from the Lottiefiles :