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

Photo of Tom Dekan
by Tom Dekan

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

We'll:

  1. Create a lottie animation, using my product Photon Designer as an example use case.
  2. Export the lottie animation.
  3. 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:

    My chosen SVG

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

Loom thumbnail


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"  style="width: 300px; height: 300px;" 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).

Let's get visual.

Do you want to create beautiful frontends effortlessly?
Click below to book your spot on our early access mailing list (as well as early adopter prices).
Copied link to clipboard 📋

Made with care by Tom Dekan

© 2024 Photon Designer