Take control of your CSS keyframe animations with React
react-jogwheel
react-jogwheel
allows for declarative control of animations
by using jogwheel under the hood.
It enables you to write your animations where they belong
– in your CSS - while giving you top notch control over them
at the same time.
Installation
Fetch react-jogwheel
via npm, install peerDependencies
npm install --save react-jogwheel jogwheel react react-dom
Usage
// index.jsx;;; state = scroll: 0 scrollingElement: null ; { const scrollingElement = thisstate; const scrollTop = scrollingElement; this; } { const document = global; const scrollingElement = documentscrollingElement || documentbody; const scrollTop = scrollingElement; this; global; } { const document = global; documentbody; } { <JogWheel ...thisprops progress=thisstateprogress /> } const element = <AnimatedElement className="animated" />;const mount = document;;
react-jogwheel demo
⇨ See the examples for details.
API
⇨ See API Doumentation for technical interface documentation.
Contributing
You dig react-jogwheel
and want to submit a pull request?
Awesome! Be sure to read the contribution guide
and you should be good to go.
Here are some notes to get you coding real quick.
git clone git@github.com:marionebl/react-jogwheel.gitcd react-jogwheelnpm installnpm start
react-jogwheel
is built by Mario Nebl and contributors
with ❤️ and released under the MIT License.