Take control of your CSS keyframe animations with React
npm install react-jogwheel> Take control of your CSS keyframe animations with React
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.
Fetch react-jogwheel via npm, install peerDependencies
``bash`
npm install --save react-jogwheel jogwheel react react-dom
`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() {
progress={this.state.progress}
/>
}
}
const element =
const mount = document.querySelector('[data-mountpoint]');
render(mount, element);
`
`html`
---
⇨ See the examples for details.
⇨ See API Doumentation for technical
interface documentation.
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.