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

Copyright © 2020 Code Green LLC