> Take control of your CSS keyframe animations with React

!react-jogwheel logo

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

``bash
npm install --save react-jogwheel jogwheel react react-dom
`

Usage

`javascript
// index.jsx
import {Component} from 'react';
import {render} from 'react-dom';
import JogWheel from 'react-jogwheel';

class AnimatedElement extends Component {
state = {
scroll: 0,
scrollingElement: null
};

handleScroll() {
const {scrollingElement} = this.state;
const {scrollTop} = scrollingElement;

this.setState({
...this.state,
scrollTop
});
}

componentWillMount() {
const {document} = global;
const scrollingElement = document.scrollingElement || document.body;
const {scrollTop} = scrollingElement;

this.setState({
scrollingElement,
scrollTop
});

global.addEventListener('scroll', (...args) => this.handleScroll(...args));
}

componentWillUnmount() {
const {document} = global;
document.body.removeEventListener('scroll', this.handleScroll);
}

render() {
{...this.props}
progress={this.state.progress}
/>
}
}

const element = ;
const mount = document.querySelector('[data-mountpoint]');
render(mount, element);
`

`html













`

---

⇨ 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.

`bash
git clone git@github.com:marionebl/react-jogwheel.git
cd react-jogwheel
npm install
npm start
`

---

react-jogwheel` is built by Mario Nebl and contributors
with :heart: and released under the MIT License.