react-jogwheel
v0.1.5
Published
Take control of your CSS keyframe animations with React
Downloads
10
Maintainers
marioneblReadme
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-domUsage
// 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() {
<JogWheel
{...this.props}
progress={this.state.progress}
/>
}
}
const element = <AnimatedElement className="animated" />;
const mount = document.querySelector('[data-mountpoint]');
render(mount, element);<!doctype html>
<html>
<head>
<title>react-jogwheel demo</title>
<style>
@keyframes shrink {
from {
transform: scale(1);
}
to {
transform: scale(0.5);
}
}
.animated {
width: 100px;
height: 100px;
background: #000;
border-radius: 50%;
animation: shrink 1s both;
animation-play-state: paused;
}
</style>
</head>
<body>
<div data-mountpoint></div>
<script src="index.js"></script>
</body>
</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.
git clone [email protected]:marionebl/react-jogwheel.git
cd react-jogwheel
npm install
npm startreact-jogwheel is built by Mario Nebl and contributors
with :heart: and released under the MIT License.