Skip to content

animakit/animakit-rotator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AnimakitRotator

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.

Usage

<AnimakitRotator side={this.state.loading}>
  <Button />
  <Loader />
</AnimakitRotator>

Installation

npm install animakit-rotator

Properties

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

Limitations

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.

Origin

AnimakitRotator is the part of Animakit. See https://animakit.github.io for more details.

Sponsored by Evil Martians