https://github.com/animakit/animakit-rotator

UNMAINTAINED: AnimakitRotator
https://github.com/animakit/animakit-rotator

Last synced: 3 months ago
JSON representation

UNMAINTAINED: AnimakitRotator

• Host: GitHub
• URL: https://github.com/animakit/animakit-rotator
• Owner: animakit
• License: mit
• Created: 2016-04-22T12:02:50.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-03-07T07:47:25.000Z (almost 6 years ago)
• Last Synced: 2024-10-26T15:47:36.078Z (3 months ago)
• Language: JavaScript
• Homepage: https://animakit.github.io/
• Size: 101 KB
• Stars: 45
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - animakit-rotator - AnimakitRotator - React component for the 3D rotation of the blocks. (Ferramentas / Form Components)
• awesome-react-components - animakit-rotator - AnimakitRotator - React component for the 3D rotation of the blocks. (UI Animation / Form Components)

README

        
# 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

```javascript

  

  

```

## [Demo](https://animakit.github.io/#/rotator)

## 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](http://easings.net/) | 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.