@dan-pugsley/react-scroll-spinner
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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,
});

Package Sidebar

Install

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

Weekly Downloads

0

Version

1.0.3

License

ISC

Unpacked Size

10.4 kB

Total Files

8

Last publish

Collaborators

  • dan-pugsley