Lottie Animation for Your Website

Lottie animations are a fantastic way to bring life and interactivity to your website. They are lightweight, scalable, and look great on all devices.

Recently, we revamped our website deuexsolutions.com, and integrated Lottie animations to introduce dynamism and interactivity, leveraging their lightweight nature and compatibility with different devices. In this article, we will explore how you can showcase Lottie animations on your website to captivate your audience and enhance user experience.

How to Display Lottie Files

Let's assume you have an account on lottiefiles.com and you have created a Lottie animation using the powerful editor provided by LottieFiles. Now, you want to display these Lottie animations on your website. To do this, you will need a player or some kind of JavaScript that can manage the animation rendering.

If you are looking for the JavaScript code to render the animation, LottieFiles has you covered. They have developed fantastic libraries to manage the rendering of Lottie animations, including @lottiefiles/dotlottie-react, which we will use for our use case since we are using Next.js for our website.

Set up the project and install dependencies

Execute the command below to create a new nextjs project.

npx create-next-app@latest

Once the project is created, navigate to the project directory and open it with VS Code or your favorite code editor.

As mentioned, we will use @lottiefiles/dotlottie-react to render the Lottie animation. Let's install it as a dependency.

yarn add @lottiefiles/dotlottie-react

OR

npm install @lottiefiles/dotlottie-react

Alright, we have set up the project and installed the necessary dependencies. In the next section, let's create a LottiePlayer component that we will use to render the Lottie animation.

Create LottiePlayer Component

import React, { FC, ReactNode } from 'react'
import dynamic from 'next/dynamic'

const DotLottieReact = dynamic(
    () =>
        import('@lottiefiles/dotlottie-react').then(
            (mod) => mod.DotLottieReact
        ),
    {
        ssr: false,
    }
)

interface LottiePlayerProps {
    src: string
    className?: string
    style?: React.CSSProperties
    autoplay?: boolean
    loop?: boolean
}

export const LottiePlayer: FC<LottiePlayerProps> = ({
    src,
    style = {},
    className = '',
    ...rest
}){
    return (
        <DotLottieReact
            autoplay
            loop
            className={className}
            src={src}
            style={style}
            {...rest}
        />
    )
}

Let's break down the component and understand each part. Here, we use Next.js dynamic import to load DotLottieReact from @lottiefiles/dotlottie-react dynamically and display it on the client side (ssr:false) because it needs browser APIs to render the animations.

import dynamic from 'next/dynamic'

const DotLottieReact = dynamic(
    () =>
        import('@lottiefiles/dotlottie-react').then(
            (mod) => mod.DotLottieReact
        ),
    {
        ssr: false,
    }
)

LottiePlayer will accept a few props, so we need to create the LottiePlayerProps interface.

interface LottiePlayerProps {
    src: string
    className?: string
    style?: React.CSSProperties
    autoplay?: boolean
    loop?: boolean
}

Lastly, we need to create a component that will render the DotLottieReact, a player provided by @lottiefiles/dotlottie-react. It takes a bunch of props, but the most important props are:

src: source URL of the Lottie animation file
loop: specifies if the animation should play repeatedly
autoplay: specifies if the animation should start playing automatically

export const LottiePlayer: FC<LottiePlayerProps> = ({
    src,
    style = {},
    className = '',
    ...rest
}){
    return (
        <DotLottieReact
            autoplay
            loop
            className={className}
            src={src}
            style={style}
            {...rest}
        />
    )
}

Alright, we have created a LottiePlayer component. In the next section, let's use this component to display the animation.

Displaying the animation

lottiefiles.com allows us to obtain Lottie animations in the following ways:

Download and export
Embed hosted URL

For the course of this article, we will be using the second option, which is the hosted URL.

You can use either .json or .lottie. I recommend using .lottie as it's much lighter compared to JSON files.

To try it out quickly, you can use these hosted URLS.

https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie
https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json

Add the following code to pages/index.tsx or app/page.tsx.

import { LottiePlayer } from '@/components/LottiePlayer/LottiePlayer'

const Home = () => {
    return (
            <div>
                <LottiePlayer src="https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie" />
            </div>
    )
}

export default Home

Start the development server by running the command below and visiting http://localhost:3000.

You can try out the .json one. I'm sure you'll definitely like it because it has a very cool animation.

Conclusion

Showcasing Lottie animations on your website can significantly enhance user experience by adding dynamism and interactivity.

By following the steps outlined in this article, you can easily integrate Lottie animations into your website, captivating your audience and making your site visually appealing across all devices. So, go ahead and bring your website to life with Lottie animations.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

How to Showcase Lottie Animation on Your Website

Comments

React/React Native

Effective Batch Updates in React

More from this blog

IoT Software Development Guide

Fintech in UAE: The Technology Trends Driving the Next Wave

Why UX Design Impacts Conversion Rates

Digital Transformation in Dubai: A Practical Playbook for Mid-Size Businesses

Enterprise Web Application Development: A Practical Guide for Growing Businesses

How to Display Lottie Files

Set up the project and install dependencies

Create LottiePlayer Component

Displaying the animation

Conclusion

Connect with us

Command Palette

Comments

React/React Native

Effective Batch Updates in React

More from this blog

How to Display Lottie Files

Set up the project and install dependencies

Create LottiePlayer Component

Displaying the animation

Conclusion

Connect with us