2kB gzipped

Demo

➤ Install

$ yarn add wheel-duo

➤ Import

import WheelDuo from 'wheel-duo';

➤ Usage

const wheelDuo = new WheelDuo({
  rootSelector: '.wheel-container',
  firstWheelSelector: '.wheel-segments-one',
  secondWheelSelector: '.wheel-segments-two',
  triggerSelector: '.wheel-trigger',
  targetAngles: [180, 270],
  callback: () => console.log('Spin complete'),
});

wheelDuo.init();

➤ Options

| Option | Type | Default | Description | |:----------------------|:-----------------------------------------:|:-------:|:--------------------------------------------------------------| | rootSelector | string | – | Root container element selector. | | firstWheelSelector | string | – | Selector for the first (top) wheel. | | secondWheelSelector | string | – | Selector for the second (bottom) wheel. | | triggerSelector | string | – | Selector for the trigger button that initiates spinning. | | targetAngles | [number, number] | – | Final rotation angles (degrees) for each wheel. | | rotations | number | 6 | Full 360° rotations before reaching target angle. | | duration | number | 5000 | Duration of the spin animation (ms). | | overshootDeg | number | 15 | Overshoot in degrees before snapping back to the final angle. | | returnDuration | number | 750 | Duration of the overshoot return animation (ms). | | swayOptions | { amplitude?: number; period?: number } | – | Optional sway animation while idle. | | callback | () => void | – | Called when both spin phases complete. |

➤ API

| Method | Description | |:------------|:--------------------------------------------------------------------------| | init() | Initializes DOM references, sets up events and starts the sway animation. | | destroy() | Cleans up animations and event listeners. | | reset() | Resets state, styles, and restarts idle animation. |

➤ States & Styling

WheelDuo dynamically applies state-based CSS classes to the root element:

• --state-one-active
• --state-one-complete
• --state-two-active
• --state-two-complete

Use these to animate UI elements or indicate progression in your styles.

➤ License

wheel-duo is released under the MIT license.