wheel-duo

^{Animated dual-wheel component with customizable spin, sway, and callback support}

^{2kB gzipped}

➤ 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.

Package detail

wheel-duo

readme

wheel-duo