Flare Animation in Gatsby

Rive offers a tool called Flare for building vector designs and animations. Check out their news release news release.

Usage

• Export you animation as an *.flr file.

• Place the file in the static folder

• Add the react-flare dependency
  npm install flare-react

• Add your annimation to a page

import React from 'react'
import FlareComponent from 'flare-react'

const IndexPage = () => {
    return ( <
        FlareComponent width = {
            200
        }
        height = {
            200
        }
        animationName = 'open'
        file = 'sample.flr' /
        >
    )
}

export default IndexPage