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