# react-rtween

> Fast, additive & swipeable animation engine for React

Latest version **1.6.2** (published 2019-06-16) · AGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install react-rtween
pnpm add react-rtween
yarn add react-rtween
bun add react-rtween
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.6.2 |
| Published | 2019-06-16 |
| First published | 2019-02-03 |
| Weekly downloads | 0 |
| License | AGPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 76.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 28 |
| Author | Nathan Braun |
| Maintainers | caipilabs |

## Links

- npm: https://www.npmjs.com/package/react-rtween
- Repository: https://github.com/n8tz/react-rtween
- Homepage: https://github.com/n8tz/react-rtween#readme
- Issues: https://github.com/n8tz/react-rtween/issues
- npm.io page: https://npm.io/package/react-rtween

## Dependencies (5)

- [is](https://npm.io/package/is.md) ^3.2.1
- [rtween](https://npm.io/package/rtween.md) ^1.2.3
- [d3-ease](https://npm.io/package/d3-ease.md) ^1.0.5
- [color-rgba](https://npm.io/package/color-rgba.md) ^2.1.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.3.1

## Recent versions

- 1.6.2 (latest) — 2019-06-16
- 1.6.1 — 2019-06-15
- 1.6.0 — 2019-06-15
- 1.5.9 — 2019-06-06
- 1.5.7 — 2019-05-18
- 1.5.4 — 2019-05-14
- 1.5.2 — 2019-05-07
- 1.5.0 — 2019-04-12
- 1.4.0 — 2019-04-07
- 1.3.3 — 2019-04-02
- 1.3.1 — 2019-03-18
- 1.3.0 — 2019-03-17
- 1.2.6 — 2019-03-14
- 1.2.5 — 2019-03-11
- 1.2.3 — 2019-03-10
- … 9 more at https://npm.io/package/react-rtween/versions

## README

<h1 align="center">react-rtween</h1>
<p align="center">Fast, SSR compatible, additive & swipeable, tween composition engine for React</p>

___

<a href="https://www.npmjs.com/package/react-rtween">
<img src="https://img.shields.io/npm/v/react-rtween.svg" alt="Npm version" /></a>

<p align="center">/!\ This is beta /!\</p>


## wtf is react-rTween ?

react-rtween is an additive tweener for react

It allow :

- Additive tween ( applying forward and backward multiples tween on same properties )
- Scrollable & swipeable animations
- SSR rendering of =! scroll / swipe position
- Hot switching scrollable anims ( responsive )
- Predictive inertia
- etc...

## Draft [samples](http://htmlpreview.github.io/?https://github.com/n8tz/react-rtween/blob/master/samples/index.html)

```jsx
import React                                        from "react";
import {asTweener, TweenRef, TweenAxis, tweenTools} from "react-rtween";


let pushIn        = [
	{
		from    : 0,
		duration: 500,
		easeFn  : "easeCircleIn",
		apply   : {
			transform: [{}, {
				translateZ: "-.2box"
			}],
			filter   : {
				sepia: 100
			}
		}
	},
	{
		from    : 500,
		duration: 500,
		easeFn  : "easeCircleIn",
		apply   : {
			transform: [{}, {
				translateZ: ".2box"
			}],
			filter   : {
				sepia: -100
			}
		}
	},
	{
		from    : 250,
		duration: 500,
		easeFn  : "easeCircle",
		apply   : {
			transform: [{}, {
				rotateY: 180,
			}],
		}
	}
];
const scrollAnims = {
	scrollX: [
		{
			from    : 0,
			duration: 200,
			apply   : {
				transform: {
					translateX: "-1box"
				},
			}
		},
		{
			from    : 0,
			duration: 100,
			apply   : {
				transform: {
					rotateX: 30,
				},
			}
		},
		{
			from    : 100,
			duration: 100,
			apply   : {
				transform: {
					rotateX: 30,
				},
			}
		}
	],
	scrollY: [
		{
			from    : 0,
			duration: 200,
			apply   : {
				transform: {
					translateY: "-1box"
				},
			}
		},
		{
			from    : 0,
			duration: 100,
			apply   : {
				transform: {
					rotateY: -30,
				},
			}
		},
		{
			from    : 100,
			duration: 100,
			apply   : {
				transform: {
					rotateY: -30,
				},
			}
		}
	]
};
@asTweener({ enableMouseDrag: true })
export default class Sample extends React.Component {
	state = {
		count: 0
	};
	
	componentDidScroll( pos ) {
		this.forceUpdate();// force update to show scroll pos
	}
	
	render() {
		return <div className={ "SimpleTest" } style={ {
			width : "100%",
			height: "100%"
		} }>
			<TweenAxis
				axe={ "scrollY" }
				defaultPosition={ 100 }
			/>
			<TweenAxis
				axe={ "scrollX" }
				defaultPosition={ 100 }
			/>
			hello ! { this.state.count } concurent anims <br/>
			scrollPos : <pre>{ JSON.stringify(this.getAxisState(), null, 2) }</pre>
			<br/>y:
			<button onClick={ e => this.scrollTo(0, 500) }>( go to 0 )</button>
			<button onClick={ e => this.scrollTo(200, 500) }>( go to 200 )</button>
			<br/>x:
			<button onClick={ e => this.scrollTo(0, 500, "scrollX") }>( go to 0 )</button>
			<button onClick={ e => this.scrollTo(200, 500, "scrollX") }>( go to 200 )</button>
			
			<TweenRef
				id={ "testItem" }
				initial={ {
					position       : "absolute",
					display        : "inline-block",
					width          : "15em",
					height         : "15em",
					cursor         : "pointer",
					backgroundColor: "red",
					overflow       : "hidden",
					margin         : "-7.5em 0 0 -7.5em",
					top            : "0%",
					left           : "0%",
					
					transform: {
						translateZ: "0box",
						translateX: "1box",
						translateY: "1box",
						rotateX   : -30,
						rotateY   : 30,
					}
				} }
				tweenLines={ scrollAnims }
			>
				<div
					onClick={ e => {
						this.setState({ count: this.state.count + 1 })
						this.pushAnim(tweenTools.target(pushIn, "testItem"),
						              () => {
							              this.setState({ count: this.state.count - 1 })
						              });
					} }
					style={ {} }>click me !
				</div>
			</TweenRef>
		</div>;
	}
}
```

### Todo :

- Nice examples 
- Better scroll support
- Full css support ( full background transitions )
- Doc, tests & clean
- SVG bindings

### License ?

AGPL license

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](#)

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