WheelFortune implements an animation of a spinning wheel of fortune using the GSAP library. It allows customization of parameters including the number of segments, number of revolutions, spin states, and callbacks.
1kB gzipped
➤ Install
$ yarn add gsap
$ yarn add wheel-fortune➤ Import
import gsap from 'gsap';
import CustomEase from 'gsap/CustomEase';
import WheelFortune from 'wheel-fortune';➤ Usage
gsap.registerPlugin(CustomEase);
WheelFortune.registerGSAP(gsap, CustomEase);
const spinStates = [
{ stopSegment: 5, callback: () => console.log('first spin end') },
{ stopSegment: 2, callback: () => console.log('second spin end') },
...
];
const wheel = new WheelFortune({
spinStates: spinStates,
rotationCount: 4,
segmentCount: 8,
});
wheel.init();➤ Options
| Option | Type | Default | Description |
|---|---|---|---|
containerEl |
string | HTMLElement
|
.wheel |
This parameter references a DOM element that acts as a container for the entire wheel of fortune. It is used to apply common styles and animations, such as blurring --blurring and changing transparency --blackout-opacity, which affect the entire component during and between spins of the wheel. |
segmentsEl |
string | HTMLElement
|
.wheel__segments |
The parameter references the DOM element containing the segments of the wheel of fortune. |
buttonEl |
string | HTMLElement
|
.wheel__button |
The parameter references the DOM element of the button that initiates the wheel spin. |
rotationCount |
number |
3 |
This parameter determines the number of full revolutions of the wheel before it stops on the last segment. |
segmentCount |
number |
8 |
This parameter defines the total number of segments on the wheel. It is used to calculate the angle of each segment (360° divided by the number of segments) and to determine the final position of the wheel after rotation. |
spinStates |
Array<{stopSegment: number, callback: Function}> |
[] |
The parameter contains an array of objects, each describing a different state of wheel rotation, including a stop segment and a colback that can be called after the wheel has stopped. |
wheelLibration |
Boolean |
false |
This parameter determines whether the visual element of the wheel will simulate libration (a slight wobble around its axis) when at rest. If set to true, the wheel will wobble slightly to the left and right. |
| HTML class | Description |
|---|---|
.is-spinning |
This class is added to the wheel container element at the start of the rotation and removed when the rotation is complete. |
.end-last-spin |
This class is added to the wheel container element after the last revolution of a series of revolutions has been completed. |
➤ License
wheel-fortune is released under MIT license
