@hsds/motion
v9.0.2
Published
[![Build Status](https://travis-ci.org/helpscout/motion.svg?branch=master)](https://travis-ci.org/helpscout/motion) [![npm version](https://badge.fury.io/js/%40helpscout%2Fmotion.svg)](https://badge.fury.io/js/%40helpscout%2Fmotion)
Downloads
64
Keywords
Readme
💫 Motion
A simple animation library for React
Table of Contents
Installation
npm install --save @hsds/motion
Usage
Start adding animations to any React component with the Motion
component:
import React from 'react'
import { Motion } from '@hsds/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
Thanks!
A big thanks to Julian Garnier for creating Anime.js, which powers the animations for Motion.