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. 🚀
npm install scroll-reveal-react
- Fade
- Flicker
- Zoom
- Flip
- Slide
- Blur
- Scale
- Roll
- Typewriter
- Fade
- Random
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.
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} />
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