# @helpscout/motion

> A simple animation library for React

Latest version **0.0.8** (published 2019-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @helpscout/motion
pnpm add @helpscout/motion
yarn add @helpscout/motion
bun add @helpscout/motion
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2019-05-23 |
| First published | 2019-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 2 |
| Unpacked size | 27.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jon Quach |
| Maintainers | charca, helpscout, itsjonq, knicklabs, plbabin, tinkertrain |
| Keywords | motion, animation, animate, fps, performance, engine, react |

## Links

- npm: https://www.npmjs.com/package/@helpscout/motion
- Repository: https://github.com/helpscout/motion
- Homepage: https://github.com/helpscout/motion#readme
- Issues: https://github.com/helpscout/motion/issues
- npm.io page: https://npm.io/package/@helpscout/motion

## Dependencies (2)

- [animejs](https://npm.io/package/animejs.md) ^3.0.1
- [@helpscout/react-utils](https://npm.io/package/@helpscout/react-utils.md) ^2.0.1

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.0.8 (latest) — 2019-05-23
- 0.0.7 — 2019-05-23
- 0.0.6 — 2019-05-23
- 0.0.5 — 2019-02-10
- 0.0.3 — 2019-02-08
- 0.0.2 — 2019-02-08
- 0.0.1 — 2019-01-30

## README

# 💫 Motion

[![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)

> A simple animation library for React

**[Check out the demo](https://helpscout-motion.netlify.com/)**

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [See Also](#see-also)
- [Thanks!](#thanks)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save @helpscout/motion
```

## Usage

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

```jsx
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](./docs)!

## See Also

- [react-utils](https://github.com/helpscout/react-utils)
- [stats](https://github.com/helpscout/stats)

## Thanks!

A big thanks to [Julian Garnier](https://github.com/juliangarnier) for creating [Anime.js](https://github.com/juliangarnier/anime), which powers the animations for Motion.

---
_Source: https://npm.io/package/@helpscout/motion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._