Embed an animation within a React application

Download an icon

Download an icon .json on Moveicon.
Icon exemple : icon.json.zip
A very simple React wrapper for the awesome bodymovin library.
To integrate an animation exported with Bodymovin on a React.js project you must.

Install the package React Bodymovin


npm install --save react-bodymovin

Import the dependency ReactBodymovin and .json file on your page


import React from 'react'
import ReactBodymovin from 'react-bodymovin'
import animation from './animation.json'
 

Create a function

Create a function that you will export, that contains an object with the properties of your animation. Example below :

const App = () => {
  const bodymovinOptions = {
    loop: true,
    autoplay: true,
    prerender: true,
    animationData: animation
  }
 
Return the element ReactBodyMovin in your JSX and associate it the prop « option » with the value of the object defined in your function.

 return (
    <div>
      <ReactBodymovin options={bodymovinOptions} />
    </div>
  )
}
 
export default App
 

It is possible afterward to adjust the size by targeting the CSS class « .react-bodymovin-container »

File size

Bodymovin is pretty huge, sadly, so you may want to load this dependency optionally somehow if you don't need it on every page. By default this will use the minified "light" version which only supports SVG to make it a little smaller. If you need the full Bodymovin library with expression support you can require ReactBodymovinFull instead.


import ReactBodymovin from 'react-bodymovin/lib/ReactBodymovinFull'

Here's the bodymovin file sizes so you can decide for yourself. I recommend using the light version (which is the default) if you can.
Bodymovin file sizes Normal Light
Default 492K 311K
Minified 226K 129K
Minified + Gzipped 53K 34K

Exemple : Download exemple

Download Exemple here : Download the example View the source.