Lottie Animation

When to use

The Lottie component can render Lottie animations conveniently and simply, and provides a way to obtain global Lottie and animation instances to meet a wider range of configuration needs. lottie-web is used internally to render Lottie animations. Compared to using lottie-web directly, use the Semi Lottie component

• No need to worry about the creation and destruction of animation containers
• No need to worry about the life cycle of the animation itself

• Easier to use with React projects

Demos

How to import

import { Lottie } from '@fibrous/semi-ui-react';

Basic Usage

When the Lottie animation resource JSON is on CDN

Pass path=your lottie json URL to the params props

import { Lottie } from '@fibrous/semi-ui-react';

export default function LottieDemo() {
    const jsonURL = '/assets/root-web-sites/lottie_demo.json';

    return (
        <div>
            <Lottie params={{ path: jsonURL }} width="300px" height="300px" />
        </div>
    );
}

When Lottie animation resource JSON needs to be packaged into the website code

Pass animationData=your lottie json object into the params props (the Demo request JSON below is only for demonstration. In actual projects, json should be manually imported instead of obtained through network requests, so that JSON animation resources can be packaged into the website code)

import { useState, useEffect } from 'react';
import { Lottie } from '@fibrous/semi-ui-react';

export default function LottieDemo() {
    const jsonURL = '/assets/root-web-sites/lottie_demo.json';
    const [data, setData] = useState('');

    useEffect(() => {
        void fetch(jsonURL)
            .then((resp) => resp.json())
            .then(setData);
    }, []);

    return (
        <div>
            <Lottie params={{ animationData: data }} width="300px" height="300px" />
        </div>
    );
}

Params Other common parameters

params will be passed to lottie.loadAnimation of lottie-web by the component. Please refer to lottie-web documentation

Common parameters

//params
{
  container: element, // Rendering container, if not passed, Semi Lottie component will automatically configure and generate
  renderer: 'svg', // Rendering mode, default SVG
  loop: true, // Whether to open loop, default true
  autoplay: true, // Whether to play automatically, default true, when set to false, you need to manually play through the play method on the animation instance
  path: 'data.json' // URL path of animation JSON file (mutually exclusive with animationData)
  animationData: {/*...*/} // JSON object of animation (mutually exclusive with animationData)
  /*...*/
}

Get the current animation instance

Use getAnimationInstance to get the animation instance of the currently playing animation. The instance contains many methods for adjusting various parameters of the animation, such as playing and pausing, getting the current frame number, adjusting the playback speed, etc.

For more information about the methods contained in the animation instance, please refer to the lottie-web documentation

import { Lottie } from '@fibrous/semi-ui-react';

export default function LottieDemo() {
    const jsonURL = '/assets/root-web-sites/lottie_demo.json';

    return (
        <div>
            <Lottie
                getAnimationInstance={(animation) => {
                    console.log(animation);
                }}
                params={{ path: jsonURL }}
                width="300px"
                height="300px"
            />
        </div>
    );
}

Get global Lottie

Use getLottie Props to get global lottie, or use the static method Lottie.getLottie on the Semi Lottie component to get global lottie

lottie-web is large, so Semi loads it on demand when an animation needs to be created. The getLottie Props is called once it has loaded and the animation is created. The static method Lottie.getLottie() is asynchronous and returns a Promise that resolves to lottie (use await or .then). The component renders no animation until lottie-web has loaded, and if it unmounts before that, no animation is created.

For more information about the methods on the global lottie, please refer to the lottie-web documentation

import { useEffect } from 'react';
import { Lottie } from '@fibrous/semi-ui-react';

export default function LottieDemo() {
    const jsonURL = '/assets/root-web-sites/lottie_demo.json';

    useEffect(() => {
        void Lottie.getLottie().then((lottie) => console.log('lottie', lottie));
    }, []);

    return (
        <div>
            <Lottie getLottie={(lottie) => console.log('lottie', lottie)} params={{ path: jsonURL }} width="300px" height="300px" />
        </div>
    );
}

API

Props

Other native attributes (such as data-*, onClick and aria-*) land on the container div. When params.container is set, the component renders nothing, and these attributes do not land anywhere.

Static methods

Accessibility

• An animation with aria-label or aria-labelledby is a named image, and its container gets role="img"; an animation without a name is decoration, and its container gets aria-hidden="true". A role or aria-* you pass wins
• With prefers-reduced-motion: reduce set in the system, the animation does not autoplay, and it pauses or plays as the setting changes while running; an explicit params.autoplay takes precedence

Design Tokens