The simplest way to add lottie animations to your Django app 🌀

Adding small animations (micro-animations) can make your web app much more engaging and polished.

We'll:

Create a lottie animation, using my product Photon Designer as an example use case.
Export the lottie animation.
Add the lottie animation to our Django template.

Preview of the custom lottie and its HTML

Hover over the lottie to see the animation 🙂

<script
  src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
  type="module"
></script>
<dotlottie-player
  src="https://lottie.host/80e4c7a6-afff-4f30-8c79-70fbba2d9d5e/6V5xXIcVJS.json"
  background="transparent"
  speed="1"
  style="width: 100px; height: 100px"
  direction="1"
  playMode="normal"
  hover
></dotlottie-player>

Create our lottie animation

Specifically, I want to create a lottie animation for the image icon here in Photon Designer.

Download a suitable image SVG from Iconify

Download the SVG file of the icon you want to animate

This is the SVG I'm using:

Next, log in to LottieFiles Creator and create the animation

Go to LottieFiles Creator
Upload the SVG file
Play around with the animation settings until you're happy with the result I made the sun in the image icon move across the sky, proceed to sunset, and then rise again.

Here's a Loom of me creating the animation:

creating_lottie - Watch Video

Export the lottie animation

Once finished, export the lottie animation to JSON format. We'll serve this JSON file from our Django app.

Click the 'Export' button
Choose the 'Lottie JSON' option
Click 'Download'

Next we'll add the lottie animation to our Django template, serving it from our local server as a static file.

Setup our Django app

pip install --upgrade django
django-admin startproject core .
python manage.py startapp sim

Add our app sim to the INSTALLED_APPS in settings.py:

# settings.py
INSTALLED_APPS = [
    'sim',
    ...
]

Serve the lottie animation in our Django app

Add views to render a template with the lottie animation

Create a views.py file in our app sim
Add a view to render a template with the lottie animation

# views.py
from django.shortcuts import render
 
def home(request):
    return render(request, 'home.html')

Add the lottie animation to our static

Create a static folder in our app sim
Create a lottie folder in the static folder
Add the lottie animation JSON file to the lottie folder (i.e., sim/static/lottie/<name_of_your_lottie_animation>.json). For me, it's sim/static/lottie/image_sunset.json

Render a template with the lottie animation

Create a templates folder in our app sim
Create a home.html file in the templates folder
Paste the below into the home.html:

<!doctype html>
{% load static %}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  </head>
 
  <body>
    <lottie-player
      src="{% static 'lottie/image_sunset.json' %}"
      background="transparent"
      speed="2"
      hover
    >
    </lottie-player>
  </body>
</html>

See the LottieFiles docs here for more options

Add the app's URLs to the project's URLs

Add the app's URLs to the project's URLs in the urls.py file in the core folder

# urls.py
from django.contrib import admin
from django.urls import path, include
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('sim.urls')),
]

Add a URL pattern to the views

Create a urls.py file in our app sim
Add a URL pattern to the views in the urls.py file in our app sim

from django.urls import path
from . import views
 
urlpatterns = [
    path('', views.home, name='home'),
]

Run the server and view the lottie animation in the browser

python manage.py runserver

Visit http://localhost:8000/ in your browser to see the lottie animation in action.

It should look like this:

And here's the HTML for my custom animated lottie - ready to be pasted into HTML 🙂

Hover over the lottie to see it 🙂

<script
  src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
  type="module"
></script>
<dotlottie-player
  src="https://lottie.host/80e4c7a6-afff-4f30-8c79-70fbba2d9d5e/6V5xXIcVJS.json"
  background="transparent"
  speed="1"
  style="width: 100px; height: 100px"
  direction="1"
  playMode="normal"
  hover
></dotlottie-player>

Complete ✅

You now know how add lottie animations to make your Django UI more engaging

P. S Want to build your Django UI faster? 💡

Do you dream of creating Django products so quickly they break the space-time continuum? Yeah, me too.

I'm building: Photon Designer. It's a visual editor that puts the 'fast' in 'very fast.'

When Photon Designer starts up, it slings Django templates at you faster than light escaping a black hole (in a friendly way).