// 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);