prince-jagani / react-scroll-animation

react-scroll-reveal

Elevate your React UI with scroll-reveal-react, a seamless solution for adding stunning scroll animations to elements and text. Effortless integration and lightweight, it transforms static content into engaging, dynamic experiences with every scroll. 🚀

Instalation

npm install scroll-reveal-react

Animations Types

Div:

• Fade
• Flicker
• Zoom
• Flip
• Slide
• Blur
• Scale
• Roll

Text:

• Typewriter
• Fade
• Random

Usage Guide

Default Props

Props	Type	Required	Default Value	Description
type	srting	yes	-	Type of the animation
duration	number	-	500	Duration of the animation
delay	number	-	100	Delay before the animation start
triggerAt	number	-	0.1	Trigger based on how much part of the animation is visible
onlyOnce	boolean	-	false	Set animation to occur only once

NOTE: duration: number is not default props for Text Components.

Example

import { Div } from 'scroll-reveal-react';

//...

<Div type='fade' duration={1000}>
  //content
</Div>

//...

<Div type='zoom' initailZoom={0.5} duration={1000}>
  //content
</Div>

import { Text } from 'scroll-reveal-react';

//...

<Text type='typewriter' latterDelay={100} />

//...

<Text type='random' randoms={3} duration={100} />

End

Thank you for choosing Scroll Reveal React to bring motion and life to your React applications! We hope this simple yet powerful library enhances your user experience, leaving a lasting impact. Happy scrolling! 🌟 #ScrollRevealReact #ReactMagic