@helpscout/motion

💫 Motion

A simple animation library for React

Check out the demo

Table of Contents

• Installation
• Usage
• Documentation
• See Also
• Thanks!

Installation

npm install --save @helpscout/motion

Usage

Start adding animations to any React component with the Motion component:

import React from 'react'
import {Motion} from '@helpscout/motion'
import Zoolander from './components/Zoolander'

class App extends React.Component {
  render() {
    return (
      <Motion
        componentDidMount={fadeInAndMoveUp}
        componentWillUnmount={fadeOut}
      >
        <Zoolander />
      </Motion>
    )
  }
}

// Technically these animation callbacks can be writing in line.
// It's advisable to keep them as separate functions to make the code
// more readable.
function fadeInAndMoveUp({animate}) {
  return animate({
    opacity: [0, 1],
    translateY: [-20, 0],
  }).finished
}

function fadeOut({animate}) {
  return animate({
    opacity: [0, 1],
    duration: 500,
    easing: 'linear',
  }).finished
}

Documentation

For additional info on Motion, check out our documentation!

See Also

• react-utils
• stats

Thanks!

A big thanks to Julian Garnier for creating Anime.js, which powers the animations for Motion.