WARNING: Currently unmaintained because of lack of interest, activity and resources
React component for the 3D rotation of the blocks. Supports up to 6 blocks, different sizes, and X/Y axis.
<AnimakitRotator side={this.state.loading}>
<Button />
<Loader />
</AnimakitRotator>npm install animakit-rotator
| Property | Required | Type | Default Value | Available Values | Description |
|---|---|---|---|---|---|
| side | true | string | Key of the first child | Key of the component child | Current visible side, that contains a child with the corresponding key |
| axis | false | string | X |
X, Y |
Axis of rotation |
| shadow | false | bool | true, false |
Shadow on the rotator side. If you use 4 or less sides, it will be visible only while rotation | |
| background | false | string | Any color in hexadecimal format | Color of the rotator side, transparent by default | |
| duration | false | number | 1000 |
Any integer number | Duration of rotation |
| easing | false | string | cubic-bezier (.165,.84,.44,1) |
Any easing function | Easing function of rotation |
The appearance of the components may be affected due to the absolute positioning, so it is preferable to use fixed width or non-breakable spaces.
AnimakitRotator is the part of Animakit. See https://animakit.github.io for more details.