{"id":13422317,"url":"https://github.com/react-voodoo/react-voodoo","last_synced_at":"2026-02-18T14:05:26.306Z","repository":{"id":57343964,"uuid":"167511340","full_name":"react-voodoo/react-voodoo","owner":"react-voodoo","description":"Faster, simplier, swipeable, multidimentional additive tween / animation engine for React","archived":false,"fork":false,"pushed_at":"2024-11-25T08:24:59.000Z","size":13521,"stargazers_count":31,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-24T10:05:10.397Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://react-voodoo.github.io/react-voodoo-samples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-voodoo.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.AGPL-3.0.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-25T08:18:30.000Z","updated_at":"2025-01-12T18:30:53.000Z","dependencies_parsed_at":"2024-04-11T21:48:38.157Z","dependency_job_id":"5d3a9fb0-edc1-43a2-abf3-9fd17e8a2e82","html_url":"https://github.com/react-voodoo/react-voodoo","commit_stats":{"total_commits":364,"total_committers":1,"mean_commits":364.0,"dds":0.0,"last_synced_commit":"41387b25120477f683296ed5aff51d6b30df66fc"},"previous_names":["n8tz/react-rtween","n8tz/react-voodoo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-voodoo%2Freact-voodoo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-voodoo%2Freact-voodoo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-voodoo%2Freact-voodoo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-voodoo%2Freact-voodoo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-voodoo","download_url":"https://codeload.github.com/react-voodoo/react-voodoo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730922,"owners_count":20338735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["additive-animation","additive-tween","composable-animations","interpolated-tween","ios-animation","reactjs","scrollable-animation","swipeable","touch","tween","tween-axis","tween-composition-engine","webanimation-api-polyfill"],"created_at":"2024-07-30T23:00:41.512Z","updated_at":"2026-02-18T14:05:26.298Z","avatar_url":"https://github.com/react-voodoo.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003ereact-voodoo\u003c/h1\u003e\n\u003cp align=\"center\"\u003eFast, SSR ready, additive \u0026 swipeable, tween composition engine for React\u003c/p\u003e\n\n___\n\u003cp align=\"center\"\u003e\u003cimg  width=\"192\" src =\"https://github.com/react-voodoo/react-voodoo/raw/master/doc/assets/logo-v0.png?sanitize=true\" /\u003e\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-voodoo\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/react-voodoo.svg\" alt=\"Npm version\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://travis-ci.org/react-voodoo/react-voodoo\"\u003e\n\u003cimg src=\"https://travis-ci.org/react-voodoo/react-voodoo.svg?branch=master\" alt=\"Build Status\" /\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat\" /\u003e\n\u003cbr/\u003e\n\u003ca href=\"http://creativecommons.org/licenses/by-nd/4.0\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/License-CC%20BY--ND%204.0-lightgrey.svg\" alt=\"License: CC BY-ND 4.0\" /\u003e\u003c/a\u003e\n\u003ca href=\"http://www.gnu.org/licenses/agpl-3.0\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/License-AGPL%20v3-blue.svg\" alt=\"License: AGPL v3\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Why another animation engine ?\n\nClassic Tween engines can only output absolute values, which quickly results in very complex code when we have to\ngradually compose values from multiple sources (e.g. when merging multiple animations based on user drag interactions )\n.\u003cbr/\u003e\n\nReact-Voodoo use a delta-based interpolation engine that solves this problem, it allows:\n\n- Additive tween \n- Swipeable complex animations ( like Android \u0026 iOS )\n- Fast \u0026 direct DOM updates ( not bound to the React rendering loop )\n- Server Side Rendering of any scroll / swipe position\n- Easily connect sensors / gestures to complex animations\n- Hot switching scrollable anims ( responsive )\n- Predictive inertia ( knowing where inertia will stop while animating )\n- Multitouch dragging ( drag multiple things at once )\n- Intuitive \u0026 flexible animation system\n- Cool ( \u0026 performant ) React integration\n- Automatically deal with multiple units using css \"calc( ... )\"\n- etc...\n\n## Basic documentation [here](doc/readme.md)\n\n## Live demo \u0026 codesandbox [here](https://react-voodoo.github.io/react-voodoo-samples/)\n\n\u003cp align=\"center\"\u003e\u003cimg src =\"https://github.com/react-voodoo/react-voodoo/raw/master/doc/assets/demo.gif?sanitize=true\" /\u003e\u003c/p\u003e\n\n## Samples sources [here](https://github.com/react-voodoo/react-voodoo-samples)\n\n## You... like it / it saved your day / you stole all the code / you want more?\n\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](#)\n\nBTC     : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a\u003cbr/\u003e\nPaypal  : \u003cspan class=\"badge-paypal\"\u003e\u003ca href=\"https://www.paypal.com/donate/?hosted_button_id=ECHYGKY3GR7CN\" title=\"Donate to this project using Paypal\"\u003e\u003cimg src=\"https://img.shields.io/badge/paypal-donate-yellow.svg\" alt=\"PayPal donate button\" /\u003e\u003c/a\u003e\u003c/span\u003e\n\n## Basics\n\n\"all in one\" example :\n\n```jsx harmony\nimport React                                  from \"react\";\nimport Voodoo                                 from \"react-voodoo\";\nimport {itemTweenAxis, tweenArrayWithTargets} from \"./somewhere\";\n\nconst styleSample = {\n\t/**\n\t * Voodoo.Node style property and the tween descriptors use classic CSS-in-JS declaration\n\t * exept we can specify values using the \"box\" unit which is a [0-1] ratio of the parent ViewBox height / width\n\t */\n\t\n\theight: \"50%\",\n\t\n\t// the tweener deal with multiple units \n\t// it will use css calc fn to add them if there's more than 1 unit used \n\twidth: [\"50%\", \"10vw\", \"-50px\", \".2box\"],\n\t\n\t// transform can use multiple \"layers\"\n\ttransform: [\n\t\t{\n\t\t\t// use rotate(X|Y|Z) \u0026 translate(X|Y|Z)\n\t\t\trotateX: \"25deg\"\n\t\t},\n\t\t{\n\t\t\ttranslateZ: \"-.2box\"\n\t\t}\n\t],\n\t\n\tfilter:\n\t\t{\n\t\t\tblur: \"5px\"\n\t\t}\n};\nconst axisSample  = [// Examples of tween descriptors\n\t{\n\t\ttarget  : \"someTweenRefId\",   // target Voodoo.Node id ( optional if used as parameter on a Voodoo.Node as it will target it )\n\t\tfrom    : 0,                // tween start position\n\t\tduration: 100,              // tween duration\n\t\teaseFn  : \"easeCircleIn\",   // function or easing fn id from [d3-ease](https://github.com/d3/d3-ease)\n\t\t\n\t\tapply: {// relative css values to be applied  \n\t\t\t// Same syntax as the styles\n\t\t\ttransform: [{}, {\n\t\t\t\ttranslateZ: \"-.2box\"\n\t\t\t}]\n\t\t}\n\t},\n\t{\n\t\tfrom    : 40,\n\t\tduration: 20,\n\t\t\n\t\t// triggered when axis has scrolled in the Event period \n\t\t// delta : a float value between [-1,1] is the update inside the Event period\n\t\tentering: ( delta ) =\u003e false,\n\t\t\n\t\t// triggered when axis has scrolled in the Event period\n\t\t// newPos, precPos : float values between [0,1] position inside the Event period\n\t\t// delta : a float value between  [-1,1] is the update inside the Event period\n\t\tmoving: ( newPos, precPos, delta ) =\u003e false,\n\t\t\n\t\t// triggered when axis has scrolled out the Event period\n\t\t// delta : a float value between  [-1,1] is the update inside the Event period\n\t\tleaving: ( delta ) =\u003e false\n\t}\n];\n\nconst Sample = ( {} ) =\u003e {\n\t\n\t/**\n\t * Voodoo tweener instanciation\n\t */\n\t\t// Classic minimal method\n\tconst [tweener, ViewBox]                   = Voodoo.hook();\n\t// get the first tweener in parents\n\tconst [parentTweener]                      = Voodoo.hook(true);\n\t// Create a tweener with options\n\tconst [twenerWithNameAndOptions, ViewBox2] = Voodoo.hook(\n\t\t{\n\t\t\t// Give an id to this tweener so we can access it's axes in the childs components\n\t\t\tname: \"root\",\n\t\t\t// max click tm in ms before a click become a drag\n\t\t\tmaxClickTm: 200,\n\t\t\t// max drag offset in px before a click become a drag\n\t\t\tmaxClickOffset: 100,\n\t\t\t// lock to only 1 drag direction  \n\t\t\tdragDirectionLock: false,\n\t\t\t// allow dragging with mouse\n\t\t\tenableMouseDrag: false\n\t\t}\n\t);\n\t// get a named parent tweener \n\tconst [nammedParentTweener]                = Voodoo.hook(\"root\")\n\t\n\t/**\n\t * once first render done, axes expose the following values \u0026 functions :\n\t */\n\t// Theirs actual position in :\n\t// tweener.axes.(axisId).scrollPos\n\t\n\t// The \"scrollTo\" function allowing to manually move the axes positions :\n\t// tweener.axes.(axisId).scrollTo(targetPos, duration, easeFn)\n\t// tweener.scrollTo(targetPos, duration, axisId, easeFn)\n\t\n\t// They can also be watched using the \"watchAxis\" function;\n\t// When called, the returned function will disable the listener if executed :\n\tReact.useEffect(\n\t\te =\u003e tweener?.watchAxis(\"scrollY\", ( pos ) =\u003e doSomething()),\n\t\t[tweener]\n\t)\n\t\n\treturn \u003cViewBox className={\"container\"}\u003e\n\t\t\u003cVoodoo.Axis\n\t\t\t\n\t\t\tid={\"scrollY\"}          // Tween axis Id\n\t\t\tdefaultPosition={100}   // optional initial position ( default : 0 )\n\t\t\t\n\t\t\t// optional Array of tween descriptors with theirs Voodoo.Node target ids ( see axisSample )\n\t\t\titems={tweenArrayWithTargets}\n\t\t\t\n\t\t\t// optional size of the scrollable window for drag synchronisation\n\t\t\tscrollableWindow={200}\n\t\t\t\n\t\t\t// optional length of this scrollable axis (default to last tween desciptor position+duration) \n\t\t\tsize={1000}\n\t\t\t\n\t\t\t// optional bounds ( inertia will target them if target pos is out )\n\t\t\tbounds={{ min: 100, max: 900 }}\n\t\t\t\n\t\t\t// optional inertia cfg ( false to disable it )\n\t\t\tinertia={\n\t\t\t\t{\n\t\t\t\t\t// called when inertia is updated\n\t\t\t\t\t// should return instantaneous move to do if wanted\n\t\t\t\t\tshouldLoop: ( currentPos ) =\u003e (currentPos \u003e 500 ? -500 : null),\n\t\t\t\t\t\n\t\t\t\t\t// called when inertia know where it will end ( when the user stop dragging )\n\t\t\t\t\twillEnd: ( targetPos, targetDelta, duration ) =\u003e {\n\t\t\t\t\t},\n\t\t\t\t\t\n\t\t\t\t\t// called when inertia know where it will snap ( when the user stop dragging )\n\t\t\t\t\twillSnap: ( currentSnapIndex, targetWayPointObj ) =\u003e {\n\t\t\t\t\t},\n\t\t\t\t\t\n\t\t\t\t\t// called when inertia end\n\t\t\t\t\tonStop: ( pos, targetWayPointObj ) =\u003e {\n\t\t\t\t\t},\n\t\t\t\t\t\n\t\t\t\t\t// called when inertia end on a snap\n\t\t\t\t\tonSnap: ( snapIndex, targetWayPointObj ) =\u003e {\n\t\t\t\t\t},\n\t\t\t\t\t\n\t\t\t\t\t// list of waypoints object ( only support auto snap 50/50 for now )\n\t\t\t\t\twayPoints: [{ at: 100 }, { at: 200 }]\n\t\t\t\t}\n\t\t\t}\n\t\t/\u003e\n\t\t\n\t\t\u003cVoodoo.Node\n\t\t\tid={\"testItem\"} // optional id\n\t\t\t\n\t\t\tstyle={styleSample}// optional styles applied before any style coming from axes : css syntax + voodoo tweener units \u0026 transform management\n\t\t\t\n\t\t\taxes={{ scrollY: axisSample }} // optional Array of tween by axis Id with no target node id required ( it will be ignored )\n\t\t\t\n\t\t\tonClick={// all unknow props are passed to the child node\n\t\t\t\t( e ) =\u003e {\n\t\t\t\t\t// start playing an anim ( prefer scrolling Axes )\n\t\t\t\t\ttweener.pushAnim(\n\t\t\t\t\t\t// make all tween target \"testItem\"\n\t\t\t\t\t\tVoodoo.tools.target(pushIn, \"testItem\")\n\t\t\t\t\t).then(\n\t\t\t\t\t\t( tweenAxis ) =\u003e {\n\t\t\t\t\t\t\t// doSomething next\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t\u003e\n\t\t\t\u003cVoodoo.Draggable\n\t\t\t\t// make drag y move the scrollAnAxis axis\n\t\t\t\t// xAxis={ \"scrollAnAxis\" }\n\t\t\t\t\n\t\t\t\t// scale / inverse dispatched delta\n\t\t\t\t// xHook={(delta)=\u003emodify(delta)} \n\t\t\t\t\n\t\t\t\t// React ref to the box, default to the parent ViewBox \n\t\t\t\t// scale is as follow : (delta / ((xBoxRef||ViewBox).offsetWidth)) * ( axis.scrollableWindow || axis.duration )  \n\t\t\t\t// xBoxRef={ref} \n\t\t\t\t\n\t\t\t\tyAxis={\"scrollY\"}// make drag y move the scrollY axis\n\t\t\t\t// yHook={(delta)=\u003emodify(delta)}\n\t\t\t\t// yBoxRef={ref} \n\t\t\t\t\n\t\t\t\t// mouseDrag={true} // listen for mouse drag ( default to false )\n\t\t\t\t// touchDrag={false} // listen for touch drag ( default to true )\n\t\t\t\t\n\t\t\t\t// button={1-3} // limit mouse drag to the specified event.button === ( default to 1; the left btn )\n\t\t\t\t\n\t\t\t\t// * actually Draggable create it's own div node\n\t\t\t\u003e\n\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\tSome content to tween\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/Voodoo.Draggable\u003e\n\t\t\u003c/Voodoo.Node\u003e\n\t\u003c/ViewBox\u003e;\n}\n```\n\n## License ?\n\nUsing CC BY-ND, you can use it in commercial apps, but you can't distribute modified versions.\u003cbr/\u003e\nUsing AGPL, you can distribute modified versions but theses versions must be AGPL too.\n\n\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](#)\n[![*](https://www.google-analytics.com/collect?v=1\u0026tid=UA-82058889-1\u0026cid=555\u0026t=event\u0026ec=project\u0026ea=view\u0026dp=%2Fproject%2Freact-voodoo\u0026dt=readme)](#)\n","funding_links":["https://www.paypal.com/donate/?hosted_button_id=ECHYGKY3GR7CN"],"categories":["UI Animation"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-voodoo%2Freact-voodoo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-voodoo%2Freact-voodoo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-voodoo%2Freact-voodoo/lists"}