react-scroll-spinner

Make HTML elements spin in response to scrolling. Spinning slows down with friction. Works with vertical and horizontal scrolling on any element. Live example.

React scroll spinner on Dan Pugsley's portfolio

Installation

npm i @dan-pugsley/react-scroll-spinner

Example usage

import useScrollSpinner from '@dan-pugsley/react-scroll-spinner';

export default function App() {
  const { spinnerRef, setSpinnerScroll } = useScrollSpinner();
  return (
    <main onScroll={e => setSpinnerScroll(e.target.scrollTop)}>
      {/* ... page content ... */}
      <div ref={spinnerRef}>Spinning element</div>
      {/* ... page content ... */}
    </main>
  );
}

Options

Additional options can be specified:

const { spinnerRef, setSpinnerScroll } = useScrollSpinner({
  speed: 0.6,
  friction: 0.00023,
  maxAngularVelocity: 0.0135,
});

GitHub

View Github