react-es6-tween v0.0.1

react-es6-tween

An declarative React.js wrapper for es6-tween tweening library

Installation

npm i react-es6-tween
# or
yarn i react-es6-tween

Usage

Note: For detailed info about how-to use and how it works, please refer to es6-tween repository

import React from 'react';
import ES6Tween from 'react-es6-tween';

const MyAnimation = () => (
  <ES6Tween from={{ x: 0 }} to={{ x: 200 }}>
    <div id="my-node" />
  </ES6Tween>
);

See example.html at GitHub repository of react-es6-tween for better understanding

Warning: When component is unmounted, tween will be stopped and can be resume after only remount

Props

Updateable props

• isPlaying optional - If false, tween pauses until you pass true
• isStopeed optional - If true, tween will stop and removed from tick store
• isReversed optional - If true, tween will reverse (like from <-> to)

Static Props

• from required - Tween initial value
• to required - Tween target value
• duration required - Tween duration
• autoPlay optional - When set this to true, tween auto-plays when wrapped component is mounted
• easing preferred - Gives animation reality, recommended to use
• interpolation optional - For complex tweens, useful for Games or Complex animations
• repeat optional - How much times tween should repeat
• yoyo optional - Used with combination of repeat
• delay optional - Delay before tween will start
• onStart, onUpdate, onComplete optional - Callbacks

License

MIT