re-ani-motion v0.1.1
Re-Ani-Motion
ReAniMotion is a flexible and customizable animation wrapper component for React. It allows you to easily add various types of animations to your React components, making your UI more engaging and dynamic. AniMotion provides a range of animation options and settings that you can configure to create eye-catching animations without the need for complex CSS or external animation libraries. It provides various animation types and customizable animation settings.
Usage
import { MouseOverMotion, EntryMotion } from 're-ani-motion';
<MouseOverMotion
animationType="border"
animationSettings={{ borderColor: 'blue', borderWidth: 1, duration: 0.3, delay: 0.1 }}
className="custom-box"
style={{ width: '100px', height: '100px' }}
>
Hover Me
</MouseOverMotion>
MouseOverMotion
The MouseOverMotion component is a React component that enables smooth animations when hovering over an element.
EntryMotion
The EntryMotion component is a React component that enables smooth animations when page is visible.
List of Effects
Props
animationType (string, default: 'border'): The type of animation to apply when hovering over the element.
animationSettings (object, default: {}): Animation settings specific to the chosen animation type.
className (string): Additional CSS class names for styling.
style (object): Inline styles for the component.
children (React nodes): Content to display within the MouseOverMotion component.
Available Animation Types And Settings
border: Changes border color and width.
Setting Description Default Value borderColor
Border color during animation N/A borderWidth
Border width during animation N/A duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
background: Changes background color.
Setting Description Default Value backgroundColor
Background color during animation N/A duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
scale: Applies a scaling effect.
Setting Description Default Value scaleFactor
Scaling factor during animation 1.2 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
rotate: Applies a rotation effect.
Setting Description Default Value degrees
Degrees of rotation during animation N/A duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
fade: Changes opacity (fade effect).
Setting Description Default Value fadeValue
Opacity value during animation N/A duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
colorChange: Changes text color.
Setting Description Default Value targetColor
Target text color during animation #000
duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
slideUp: Slides the children up.
Setting Description Default Value duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
slideDown: Slides the children down.
Setting Description Default Value duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
slideLeft: Slides the children left.
Setting Description Default Value duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
slideRight: Slides the children right.
Setting Description Default Value duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
zoomIn: Zoom in the children.
Setting Description Default Value zoomCount
Number of times to animate (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
zoomOut: Zoom out the children.
Setting Description Default Value zoomCount
Number of times to animate (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
bounce: Applies bounce effect.
Setting Description Default Value bounceCount
Number of times it should bounce (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
spin: Applies spin effect.
Setting Description Default Value duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
flip: Applies flip effect.
Setting Description Default Value flipCount
Number of times it should flip (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
elastic: Applies elastic effect.
Setting Description Default Value elasticityCount
Number of times it should show elasticity (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
pulse: Applies pulse effect.
Setting Description Default Value pulseCount
Number of times it should show pulse effect (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
blink: Applies blink effect.
Setting Description Default Value blinkCount
Number of times it should blink (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
shake: Applies shake effect.
Setting Description Default Value shakeCount
Number of times it should shake (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
zigzag: Applies zigzag effect.
Setting Description Default Value zigzagCount
Number of times it should zigzag (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
spring: Applies spring effect.
Setting Description Default Value springCount
Number of times it should spring (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
fadeIn: Applies fadeIn effect.
Setting Description Default Value fadeCount
Number of times it should fadeIn (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
fadeOut: Applies fadeOut effect.
Setting Description Default Value fadeCount
Number of times it should fadeOut (can use number or string='infinite') 1 duration
Animation duration in seconds 1 delay
Animation delay in seconds 0
spinner: Add a spin loader effect.
Setting Description Default Value height
Height of the loader 20 width
Width of the loader 20 borderWidth
Border width of the loader 4 circleColor
Color of the loader rgba(0, 0, 0, 0.1)
spinnerColor
Color of the loading spinner #000
speed
Speed of the loader 1