How to use bodymovin - 10 common examples

To help you get started, we’ve selected a few bodymovin 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 undefinedZNN / react-koa-mobx-server-side-render / src / containers / Bodymovin / Bodymovin.jsx View on Github external
componentDidMount () {
    const animationData = require('Assets/bodymovin/react_logo.json')
    const animationProperties = {
      container: this.refs.cycle,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData
    }
    // 渲染svg
    Bodymovin.loadAnimation(animationProperties)
  }
  render() {
github chenqingspring / ng-lottie / dist / esm / src / lottieAnimationView.component.js View on Github external
ngOnInit() {
        this._options = {
            container: this.lavContainer.nativeElement,
            renderer: 'svg',
            loop: this.options.loop !== false,
            autoplay: this.options.autoplay !== false,
            animationData: this.options.animationData,
            path: this.options.path || ''
        };
        this.viewWidth = this.width + 'px' || '100%';
        this.viewHeight = this.height + 'px' || '100%';
        let anim = bodymovin.loadAnimation(this._options);
        this.animCreated.emit(anim);
    }
}
github colmbrady / lottie-reactxp / src / web / index.js View on Github external
setUpAnimation() {
    this.anim = bodymovin.loadAnimation(this.options);
    this.setSpeed();
    this.anim.addEventListener('complete', this.props.onComplete);
    this.anim.addEventListener('loopComplete', this.props.onLoopComplete);
  }
github Thorium-Sim / thorium / src / components / viewscreens / AsteroidField / index.js View on Github external
componentDidMount() {
    bodymovin.loadAnimation({
      container: ReactDOM.findDOMNode(this),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData
    });
  }
  render() {
github Thorium-Sim / thorium / src / components / viewscreens / Docking / index.js View on Github external
componentDidMount() {
    bodymovin.loadAnimation({
      container: ReactDOM.findDOMNode(this),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData
    });
  }
  render() {
github Thorium-Sim / thorium / src / components / viewscreens / RedAlert / index.js View on Github external
componentDidMount() {
    bodymovin.loadAnimation({
      container: ReactDOM.findDOMNode(this),
      renderer: "canvas",
      loop: true,
      autoplay: true,
      animationData
    });
  }
  render() {
github processprocess / Pictooptic / clientView / IntroAnim.js View on Github external
},
  path: './images/animation/loadAnim.json'
};

let ccData = {
  container: ccAnimHolder,
  renderer: 'svg',
  loop: true,
  autoplay: false,
  rendererSettings: {
    progressiveLoad: false
  },
  path: './images/animation/ccLoading.json'
};

pictoAnim = bodymovin.loadAnimation(pictoData);
ccAnim = bodymovin.loadAnimation(ccData);

let resolve;

class IntroAnim {
  static play(resolveData) {
    resolve = resolveData;
    pictoAnim.setDirection(1);
    pictoAnim.play();
  }

  static reverse(resolveData) {
    resolve = resolveData;
    IntroAnim.stopLoader();
    pictoAnim.setDirection(-1);
    pictoAnim.play();
github madebywild / konterball / src / javascripts / app.js View on Github external
$.getJSON('/animations/1player-v3.json', data => {
          this.singleplayerAnimation = bodymovin.loadAnimation({
            container: document.getElementById('singleplayer-animation'),
            renderer: 'svg',
            loop: true,
            animationData: data,
          });
          resolve();
        });
      }),
github madebywild / konterball / src / javascripts / app.js View on Github external
$.getJSON('/animations/2player-v3.json', data => {
          this.multiplayerAnimation = bodymovin.loadAnimation({
            container: document.getElementById('multiplayer-animation'),
            renderer: 'svg',
            loop: true,
            animationData: data,
          });
          resolve();
        });
      }),
github processprocess / Pictooptic / clientView / IntroAnim.js View on Github external
path: './images/animation/loadAnim.json'
};

let ccData = {
  container: ccAnimHolder,
  renderer: 'svg',
  loop: true,
  autoplay: false,
  rendererSettings: {
    progressiveLoad: false
  },
  path: './images/animation/ccLoading.json'
};

pictoAnim = bodymovin.loadAnimation(pictoData);
ccAnim = bodymovin.loadAnimation(ccData);

let resolve;

class IntroAnim {
  static play(resolveData) {
    resolve = resolveData;
    pictoAnim.setDirection(1);
    pictoAnim.play();
  }

  static reverse(resolveData) {
    resolve = resolveData;
    IntroAnim.stopLoader();
    pictoAnim.setDirection(-1);
    pictoAnim.play();
  }

bodymovin

After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript

MIT
Latest version published 5 years ago

Package Health Score

66 / 100
Full package analysis