How to use the lottie-web.loadAnimation function in lottie-web

To help you get started, we’ve selected a few lottie-web examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mvaleriani / Dialoq / frontend / components / serverColumn / ServerColumn.jsx View on Github external
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'
      }
github timc1 / time-capsule / src / pages / index.js View on Github external
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()
  }, [])
github Vizzuality / gfw / app / javascript / pages / topics / components / topics-slide / topics-image / component.jsx View on Github external
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
        });
      }
    });
  };
github magna25 / lottie-editor / src / App.js View on Github external
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)
    
  }
github felippenardi / lottie-react-web / src / index.js View on Github external
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();
  }
github fe6 / water / src / views / Home.vue View on Github external
this.$nextTick(() => {
        lottie.loadAnimation({
          container: this.$refs.lottie as Element,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: animationData(this.path),
        });
        this.coreStatus = true;
      });
    }
github thedevelobear / react-rewards / src / components / Memphis.js View on Github external
const memphis = (container) => {
  lottie.loadAnimation({
    container: container,
    renderer: 'svg',
    rendererSettings: {
      className: 'absolute-player'
    },
    loop: false,
    autoplay: true,
    animationData: animationData,
    onComplete: lottie.destroy()
  })
}
export default memphis
github timc1 / time-capsule / src / components / questionnaire / steps / shared / intro.js View on Github external
useEffect(() => {
      if (!canContinue) setContinue(true)

      if (illustration) {
        animationRef.current = lottie.loadAnimation({
          container: illustrationRef.current,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: illustration,
        })
      }
      return () => {
        if (animationRef.current) {
          animationRef.current.destroy()
        }
      }
    }, [])
github iotaledger / trinity-wallet / src / desktop / src / ui / components / Lottie.js View on Github external
useEffect(() => {
        const options = {
            container: container.current,
            renderer: 'svg',
            animationData: data,
            loop: loop || false,
            autoplay: !paused,
        };
        const _animation = lottie.loadAnimation(options);

        if (segments) {
            _animation.playSegments(segments);
        }

        if (typeof onEnd === 'function') {
            _animation.addEventListener('complete', onEnd);
        }

        setAnimation(_animation);

        return () => {
            _animation.destroy();
        };
    }, []);
github ctf0 / Laravel-Media-Manager / src / resources / assets / js / modules / events.js View on Github external
function bm(el, name) {
    lottie.loadAnimation({
        container: el,
        renderer: 'svg',
        loop: true,
        name: name,
        autoplay: true,
        path: el.getAttribute('data-json'),
        rendererSettings: {
            clearCanvas: true,
            progressiveLoad: true,
            hideOnTransparent: false
        }
    })
}