Looping animation for react-motion Spring
npm install react-motion-loop
Looping animation for react-motion Spring
https://nkbt.github.io/react-motion-loop
https://codepen.io/nkbt/pen/ybqmWw
``sh`
npm install --save react-motion-loop
`sh`
yarn add react-motion-loop
html
(Module exposed as ReactMotionLoop)
`
Usage
js
import React from 'react';
import ReactDOM from 'react-dom';
import {spring} from 'react-motion';
import {ReactMotionLoop} from 'react-motion-loop';
const App = () => (
Looping animation
styleTo={{width: spring(100), height: spring(100)}}>
{style => }
Pulsing animation
styleTo={{width: spring(100), height: spring(100)}}>
{style => }
);const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(
`Options
####
: PropTypes.object.isRequiredInitial style for animated element, used for ReactMotion's
defaultStyle and as returning animation
####
styleTo: PropTypes.object.isRequiredElement is animated to this style, used for ReactMotion's
style
#### All arbitrary props will be transferred to
as isWARN: passing
onRest, style or defaultStyle will override looping behavior, since internally Motion is used like:
`js
onRest={this.onRest}
style={style}
{...props} />
`
Development and testing
Currently is being developed and tested with the latest stable
on OSX.To run example covering all
ReactMotionLoop features, use yarn start, which will compile example/index.jsbash
git clone git@github.com:nkbt/react-motion-loop.git
cd react-motion-loop
yarn install
yarn startthen
open http://localhost:8080
`Tests
bash
to run ESLint check
yarn lintto run tests
yarn test
``MIT