react-es6-tween

0.0.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i react-es6-tween

Weekly Downloads

3

Version

0.0.1

License

MIT

Unpacked Size

11 kB

Total Files

8

Last publish

Collaborators

  • dalisoft