react-voodoo-tweener v1.0.0

wtf is react-voodoo ?

react-voodoo 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 & minimalist samples here ( sources )

Draft & minimalist doc here

Basics

import React from "react";
import {asTweener, TweenAxis, TweenRef, tweenTools} from "react-voodoo";
import {itemTweenAxis, pageTweenAxisWithTargets} from "./somewhere";

@asTweener
export default class MyTweenerComp extends React.Component{
	
	render() {
		return <div>
			<TweenAxis
				// Tween axis Id 
				// * scrollY & scrollX automatically receive mouse & touch events
				axe={"scrollY"}
				
				// default start position
				defaultPosition={100}

				// Global scrollable tween with theirs TweenRef target ids
				items={pageTweenAxisWithTargets}

				// size of the scrollable window for drag synchronisation
				scrollableWindow={ 200 }
				
				// default length of this scrollable axis
				size={ 1000 }
				 
				// optional bounds ( inertia will target them if target pos is out )
				bounds={ { min : 100, max : 900 } }
				 
				// inertia cfg ( false to disable it ) 
				inertia={
						{
							// called when inertia is updated
							// should return instantaneous move to do if wanted
							shouldLoop: ( currentPos ) => ( currentPos > 500 ? -500 : null ),
							
							// called when inertia know where it will snap ( when the user stop dragging )   
							willSnap  : ( currentSnapIndex, targetWayPointObj ) => {},
							
							// list of waypoints object ( only support auto snap for now ) 
							wayPoints : [{ at: 100 }, { at: 200 }]
						}
					}
			/>
			
		    <TweenRef
			id={"testItem"} // optional id
			initial={
				{
					// css syntax + voodoo tweener units & transform management 
				}
			}
			// Scrollable tween with no id required ( it will be ignored )
			// * will use scrollY axis as default                 
			tweenAxis={
				{
					scrollY : itemTweenAxis
				}
			} 
			// on(Dbl)Click is forwarder with the tweener component as 2nd arg
			onClick={
				(e, tweener)=>{
					// start playing an anim
				    tweener.pushAnim(
					// make all tween target "testItem"
					tweenTools.target(pushIn, "testItem")
				    ).then(
					(tweenAxis) => {
					   // doSomething next
					}
				    );
			    }
			}
		    >
                <div>
                    Some content to tween
                </div>
            </TweenRef>
		</div>;
    }
}

todo / roadmap ?

• Better scroll support / fixs
• Full css support ( full background transitions )
• Doc, tests & code cleaning
• various simple & smart optims
• Allow tween-axis to css keyframe anims ?
• Allow SVG bindings ?

License ?

AGPL license