Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-voodoo/react-voodoo
Faster, simplier, swipeable, multidimentional additive tween / animation engine for React
https://github.com/react-voodoo/react-voodoo
additive-animation additive-tween composable-animations interpolated-tween ios-animation reactjs scrollable-animation swipeable touch tween tween-axis tween-composition-engine webanimation-api-polyfill
Last synced: 8 days ago
JSON representation
Faster, simplier, swipeable, multidimentional additive tween / animation engine for React
- Host: GitHub
- URL: https://github.com/react-voodoo/react-voodoo
- Owner: react-voodoo
- License: mit
- Created: 2019-01-25T08:18:30.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-24T11:28:31.000Z (3 months ago)
- Last Synced: 2024-10-05T15:03:54.051Z (29 days ago)
- Topics: additive-animation, additive-tween, composable-animations, interpolated-tween, ios-animation, reactjs, scrollable-animation, swipeable, touch, tween, tween-axis, tween-composition-engine, webanimation-api-polyfill
- Language: JavaScript
- Homepage: https://react-voodoo.github.io/react-voodoo-samples/
- Size: 12.9 MB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.AGPL-3.0.MD
Awesome Lists containing this project
- awesome-react-components - react-voodoo - [demo/samples](https://github.com/react-voodoo/react-voodoo-samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc (UI Animation / Form Components)
- awesome-react-components - react-voodoo - [demo/samples](https://github.com/react-voodoo/react-voodoo-samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc (UI Animation / Form Components)
- fucking-awesome-react-components - react-voodoo - <b><code> 3⭐</code></b> <b><code> 0🍴</code></b> [demo/samples](https://github.com/react-voodoo/react-voodoo-samples)) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc (UI Animation / Form Components)
README
react-voodoo
Fast, SSR ready, additive & swipeable, tween composition engine for React
___
## Why another animation engine ?
Classic Tween engines can only output absolute values, which quickly results in very complex code when we have to
gradually compose values from multiple sources (e.g. when merging multiple animations based on user drag interactions )
.
React-Voodoo use a delta-based interpolation engine that solves this problem, it allows:
- Additive tween
- Swipeable complex animations ( like Android & iOS )
- Fast & direct DOM updates ( not bound to the React rendering loop )
- Server Side Rendering of any scroll / swipe position
- Easily connect sensors / gestures to complex animations
- Hot switching scrollable anims ( responsive )
- Predictive inertia ( knowing where inertia will stop while animating )
- Multitouch dragging ( drag multiple things at once )
- Intuitive & flexible animation system
- Cool ( & performant ) React integration
- Automatically deal with multiple units using css "calc( ... )"
- etc...
## Basic documentation [here](doc/readme.md)
## Live demo & codesandbox [here](https://react-voodoo.github.io/react-voodoo-samples/)
## Samples sources [here](https://github.com/react-voodoo/react-voodoo-samples)
## Note
react-voodoo still miss some interpolator ( like background or borders ).
## You... like it / it saved your day / you stole all the code / you want more?
[](#)
BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a
Paypal : 
## Basics
"all in one" example :
```jsx harmony
import React from "react";
import Voodoo from "react-voodoo";
import {itemTweenAxis, tweenArrayWithTargets} from "./somewhere";
const styleSample = {
/**
* Voodoo.Node style property and the tween descriptors use classic CSS-in-JS declaration
* exept we can specify values using the "box" unit which is a [0-1] ratio of the parent ViewBox height / width
*/
height: "50%",
// the tweener deal with multiple units
// it will use css calc fn to add them if there's more than 1 unit used
width: ["50%", "10vw", "-50px", ".2box"],
// transform can use multiple "layers"
transform: [
{
// use rotate(X|Y|Z) & translate(X|Y|Z)
rotateX: "25deg"
},
{
translateZ: "-.2box"
}
],
filter:
{
blur: "5px"
}
};
const axisSample = [// Examples of tween descriptors
{
target : "someTweenRefId", // target Voodoo.Node id ( optional if used as parameter on a Voodoo.Node as it will target it )
from : 0, // tween start position
duration: 100, // tween duration
easeFn : "easeCircleIn", // function or easing fn id from [d3-ease](https://github.com/d3/d3-ease)
apply: {// relative css values to be applied
// Same syntax as the styles
transform: [{}, {
translateZ: "-.2box"
}]
}
},
{
from : 40,
duration: 20,
// triggered when axis has scrolled in the Event period
// delta : a float value between [-1,1] is the update inside the Event period
entering: ( delta ) => false,
// triggered when axis has scrolled in the Event period
// newPos, precPos : float values between [0,1] position inside the Event period
// delta : a float value between [-1,1] is the update inside the Event period
moving: ( newPos, precPos, delta ) => false,
// triggered when axis has scrolled out the Event period
// delta : a float value between [-1,1] is the update inside the Event period
leaving: ( delta ) => false
}
];
const Sample = ( {} ) => {
/**
* Voodoo tweener instanciation
*/
// Classic minimal method
const [tweener, ViewBox] = Voodoo.hook();
// get the first tweener in parents
const [parentTweener] = Voodoo.hook(true);
// Create a tweener with options
const [twenerWithNameAndOptions, ViewBox2] = Voodoo.hook(
{
// Give an id to this tweener so we can access it's axes in the childs components
name: "root",
// max click tm in ms before a click become a drag
maxClickTm: 200,
// max drag offset in px before a click become a drag
maxClickOffset: 100,
// lock to only 1 drag direction
dragDirectionLock: false,
// allow dragging with mouse
enableMouseDrag: false
}
);
// get a named parent tweener
const [nammedParentTweener] = Voodoo.hook("root")
/**
* once first render done, axes expose the following values & functions :
*/
// Theirs actual position in :
// tweener.axes.(axisId).scrollPos
// The "scrollTo" function allowing to manually move the axes positions :
// tweener.axes.(axisId).scrollTo(targetPos, duration, easeFn)
// tweener.scrollTo(targetPos, duration, axisId, easeFn)
// They can also be watched using the "watchAxis" function;
// When called, the returned function will disable the listener if executed :
React.useEffect(
e => tweener?.watchAxis("scrollY", ( pos ) => doSomething()),
[tweener]
)
return
(currentPos > 500 ? -500 : null),
// called when inertia know where it will end ( when the user stop dragging )
willEnd: ( targetPos, targetDelta, duration ) => {
},
// called when inertia know where it will snap ( when the user stop dragging )
willSnap: ( currentSnapIndex, targetWayPointObj ) => {
},
// called when inertia end
onStop: ( pos, targetWayPointObj ) => {
},
// called when inertia end on a snap
onSnap: ( snapIndex, targetWayPointObj ) => {
},
// list of waypoints object ( only support auto snap 50/50 for now )
wayPoints: [{ at: 100 }, { at: 200 }]
}
}
/>
{
// start playing an anim ( prefer scrolling Axes )
tweener.pushAnim(
// make all tween target "testItem"
Voodoo.tools.target(pushIn, "testItem")
).then(
( tweenAxis ) => {
// doSomething next
}
);
}
}
>
modify(delta)}
// React ref to the box, default to the parent ViewBox
// scale is as follow : (delta / ((xBoxRef||ViewBox).offsetWidth)) * ( axis.scrollableWindow || axis.duration )
// xBoxRef={ref}
yAxis={"scrollY"}// make drag y move the scrollY axis
// yHook={(delta)=>modify(delta)}
// yBoxRef={ref}
// mouseDrag={true} // listen for mouse drag ( default to false )
// touchDrag={false} // listen for touch drag ( default to true )
// button={1-3} // limit mouse drag to the specified event.button === ( default to 1; the left btn )
// * actually Draggable create it's own div node
>
Some content to tween
;
}
```
## License ?
Using CC BY-ND, you can use it in commercial apps, but you can't distribute modified versions.
Using AGPL, you can distribute modified versions but theses versions must be AGPL too.
[](#)
[](#)