How to Showcase Lottie Animation on Your Website

Display animations using lottiefiles

How to Showcase Lottie Animation on 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.

Connect with me