animakit-rotator alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view animakit-rotator alternatives based on common mentions on social networks and blogs.
-
framer/motion
DISCONTINUED. Open source, production-ready animation and gesture library for React [Moved to: https://github.com/motiondivision/motion] -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies 3kB -
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
react-tween
DISCONTINUED. DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
anim-react
simple js react animation, animation hook, web Animation interface, onclick animation, onview,onsight animation, without css animation, no transition animation, js animation class usage.
SaaSHub - Software Alternatives and Reviews
Do you think we are missing an alternative of animakit-rotator or a related project?
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
<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.