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 Svelte projects

Demos

How to import

<script lang="ts">
    import { Lottie } from '@fibrae/semi-ui-svelte';
</script>

Basic Usage

When the Lottie animation resource JSON is on CDN

Pass path=your lottie json URL to the params props

<script lang="ts">
    import { Lottie } from '@fibrae/semi-ui-svelte';

    const jsonURL = '/assets/root-web-sites/lottie_demo.json';
    const params = { path: jsonURL };
</script>

<div>
    <Lottie height="300px" {params} width="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)

<script lang="ts">
    import { onMount } from 'svelte';
    import { Lottie } from '@fibrae/semi-ui-svelte';

    const jsonURL = '/assets/root-web-sites/lottie_demo.json';

    // large animation data is held in $state.raw so it is not made deeply reactive
    let data = $state.raw<object | string>('');
    // params reloads the animation when it is replaced, so it is derived from the data instead of mutated
    const params = $derived({ animationData: data });

    onMount(() => {
        void fetch(jsonURL)
            .then((resp) => resp.json())
            .then((json: object) => {
                data = json;
            });
    });
</script>

<div>
    <Lottie height="300px" {params} width="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

Pass a callback to the getAnimationInstance prop 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. It is called once per animation created, including every reload.

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

<script lang="ts">
    import { Lottie, type LottieAnimation } from '@fibrae/semi-ui-svelte';

    const jsonURL = '/assets/root-web-sites/lottie_demo.json';
    const params = { path: jsonURL };

    const onAnimation = (animation: LottieAnimation) => {
        console.log(animation);
    };
</script>

<div>
    <Lottie getAnimationInstance={onAnimation} height="300px" {params} width="300px" />
</div>

Get global Lottie

Pass a callback to the getLottie prop 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 prop is called once it has loaded and the animation is created, once per mount. 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

<script lang="ts">
    import { onMount } from 'svelte';
    import { Lottie, type LottieModule } from '@fibrae/semi-ui-svelte';

    const jsonURL = '/assets/root-web-sites/lottie_demo.json';
    const params = { path: jsonURL };

    const onLottie = (lottie: LottieModule) => {
        console.log('lottie', lottie);
    };

    onMount(() => {
        void Lottie.getLottie().then((lottie) => console.log('lottie', lottie));
    });
</script>

<div>
    <Lottie getLottie={onLottie} height="300px" {params} width="300px" />
</div>

API

Props

class, style (a string) and native attributes (such as data-* and aria-*) land on the container div. params reloads whenever its content changes, mutating a $state in place included, and a snapshot is taken before it reaches lottie-web; hold large animation data in $state.raw. When params.container is set the component renders nothing, so these attributes have nowhere to land.

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