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 |