animakit-rotator

AnimakitRotator - React component for the 3D rotation of the blocks

Usage no npm install needed!

<script type="module">
  import animakitRotator from 'https://cdn.skypack.dev/animakit-rotator';
</script>

README

AnimakitRotator

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>

Demo

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