How to use lottie-web - 10 common examples

const loadAnimationAsync = async (_name: string) => {
        try {
            const animationData = await import(/* webpackChunkName: "animation/[request]" */ `../../../../public/animations/${_name}.json`);

            lottie.loadAnimation({
                container: container.current, // the dom element that will contain the animation
                renderer: 'svg',
                loop: true,
                autoplay: true,
                animationData,
            });
        } catch (error) {
            // tslint:disable-next-line:no-console
            console.error('Error loading animation');
        }
    };

componentDidMount() {
    this.props.fetchUserServers();
    

    if (this.props.match.path !== '/home') {
      // this.props.fetchServerRooms(this.props.match.params.serverId);
      // this.props.fetchServerMembers(this.props.match.params.serverId);
    } else {

      // this.props.fetchPMRooms();
    }

    let addButton = document.getElementById('add-server-button');
    this.buttonAnim = loadAnimation({
      container: addButton,
      renderer: 'svg',
      loop: false,
      prerender:false,
      autoplay: false,
      autoloadSegments: false,

      animationData: this.checkAnim,
      rendererSettings: {
        context: '',
        scaleMode: 'noScale',
        clearCanvas: false,
        progressiveLoad: false,
        hideOnTransparent: true,
        className: 'add-server'
      }

useEffect(() => {
    animationRef.current = lottie.loadAnimation({
      container: illustrationRef.current, // the dom element that will contain the animation
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: landingIllustration,
    })

    return () => animationRef.current.destroy()
  }, [])

loop: true,
        autoplay: this._playing,
        assetsPath: `${this._assetsPath}/${this._hash}/`,
        // Apparently the lottie player modifies the data as it runs?
        animationData: JSON.parse(JSON.stringify(this._state.lottie)),
        rendererSettings: {
          preserveAspectRatio:'xMidYMid meet'
        },
      });
      this._live = null;
    } else {
      // we have edits, update the live preview version.
      // It will re-start from the very beginning, but the user can
      // hit "rewind" to re-sync them.
      $$('#live').innerHTML = '';
      this._live = bodymovin.loadAnimation({
        container: $$('#live'),
        renderer: 'svg',
        loop: true,
        autoplay: this._playing,
        assetsPath: `${this._assetsPath}/${this._hash}/`,
        // Apparently the lottie player modifies the data as it runs?
        animationData: JSON.parse(JSON.stringify(this._editor.get())),
        rendererSettings: {
          preserveAspectRatio:'xMidYMid meet'
        },
      });
    }
  }

_renderLottieWeb() {
    if (!this._showLottie) {
      return;
    }
    // Don't re-start the animation while the user edits.
    if (!this._hasEdits) {
      $$('#container').innerHTML = '';
      this._lottie = bodymovin.loadAnimation({
        container: $$('#container'),
        renderer: 'svg',
        loop: true,
        autoplay: this._playing,
        assetsPath: `${this._assetsPath}/${this._hash}/`,
        // Apparently the lottie player modifies the data as it runs?
        animationData: JSON.parse(JSON.stringify(this._state.lottie)),
        rendererSettings: {
          preserveAspectRatio:'xMidYMid meet'
        },
      });
      this._live = null;
    } else {
      // we have edits, update the live preview version.
      // It will re-start from the very beginning, but the user can
      // hit "rewind" to re-sync them.

hideOnTransparent: true,
      },
    };

    // Load the resource information
    try {
      const srcParsed = parseSrc(src);
      const srcAttrib = typeof srcParsed === 'string' ? 'path' : 'animationData';

      // Clear previous animation, if any
      if (this._lottie) {
        this._lottie.destroy();
      }

      // Initialize lottie player and load animation
      this._lottie = lottie.loadAnimation({
        ...options,
        [srcAttrib]: srcParsed
      });
    } catch (err) {
      this.currentState = PlayerState.Error;

      this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
      return;
    }

    if (this._lottie) {
      // Calculate and save the current progress of the animation
      this._lottie.addEventListener('enterFrame', () => {
        this.seeker = (this._lottie.currentFrame / this._lottie.totalFrames) * 100;

        this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {

this._options = {
            container: this.lavContainer.nativeElement,
            renderer: this.options.renderer || 'svg',
            loop: this.options.loop !== false,
            autoplay: this.options.autoplay !== false,
            autoloadSegments: this.options.autoloadSegments !== false,
            animationData: this.options.animationData,
            path: this.options.path || '',
            rendererSettings: this.options.rendererSettings || {}
        };

        this.viewWidth = this.width + 'px' || '100%';
        this.viewHeight = this.height + 'px' || '100%';

        let anim: any = lottie.loadAnimation(this._options);
        this.animCreated.emit(anim);
    }
}

animations.forEach(a => {
      if (a.type !== 'svg') {
        this.animations[a.id] = lottie.loadAnimation({
          wrapper: this.svgWrappers[a.id],
          animType: 'svg',
          loop: true,
          animationData: a.data
        });
      }
    });
  };

lottieRender = () => {
    lottie.destroy()

    let animation = lottie.loadAnimation({
      container: document.getElementById("preview"), 
      renderer: "svg",
      loop: true,
      autoplay:true,
      animationData: this.state.data,
    });
    if(this.state.paused) animation.goToAndStop(this.state.currentFrameTime,true)
    animation.addEventListener('enterFrame',this.updateCurrentFrame)
    
  }

segments,
    } = options;

    this.options = {
      container: this.el,
      renderer: 'svg',
      loop: loop !== false,
      autoplay: autoplay !== false,
      segments: segments !== false,
      animationData,
      rendererSettings,
    };

    this.options = { ...this.options, ...options };

    this.anim = lottie.loadAnimation(this.options);
    this.setSpeed();
    this.setDirection();
    this.animApi = lottieApi.createAnimationApi(this.anim);
    this.registerEvents(eventListeners);
    this.setAnimationControl();
  }