Skip to content
💫 Motion: A simple animation library for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
.vscode
docs
scripts
src
stories
.babelrc
.eslintrc
.gitignore
.prettierignore
.prettierrc.yml
.travis.yml
LICENSE
README.md
jest.config.js
package-lock.json
package.json
tsconfig.json

README.md

💫 Motion

Build Status npm version

A simple animation library for React

Check out the demo

Table of Contents

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],
  })
}

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

Documentation

For additional info on Motion, check out our documentation!

See Also

Thanks!

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

You can’t perform that action at this time.