@ar-dacity/ardacity-scroll-reveal

ArDacity Scroll Reveal

A React component that provides smooth scroll-triggered animations with blur, opacity, and rotation effects.

Installation

npm install @ar-dacity/ardacity-scroll-reveal

or

yarn add @ar-dacity/ardacity-scroll-reveal

This package requires GSAP as a peer dependency. If you haven't already installed it, run:

npm install gsap

Usage

import ScrollReveal from './components/ArDacityUi/ScrollReveal/ScrollReveal';
// Or simply:
import { ScrollReveal } from './components/ArDacityUi/ScrollReveal';

function App() {
  return (
    <div>
      <ScrollReveal
        baseOpacity={0}
        enableBlur={true}
        baseRotation={5}
        blurStrength={10}
      >
        When does a man die? When he is hit by a bullet? No! When he suffers a disease?
        No! When he ate a soup made out of a poisonous mushroom?
        No! A man dies when he is forgotten!
      </ScrollReveal>
    </div>
  );
}

Component Props

Property	Type	Default	Description
children	ReactNode	—	The text or elements to be animated. If a string is provided, it will be split into words.
scrollContainerRef	React.RefObject	window	Optional ref for the scroll container. If provided, GSAP will use this container for scroll triggers; otherwise, it defaults to the window.
enableBlur	boolean	true	Enables the blur animation effect on the words.
baseOpacity	number	0.1	The initial opacity value for the words before the animation.
baseRotation	number	3	The starting rotation (in degrees) for the container before it animates to 0.
blurStrength	number	4	The strength of the blur effect (in pixels) applied at the start of the animation.
containerClassName	string	""	Additional CSS class(es) to apply to the container element.
textClassName	string	""	Additional CSS class(es) to apply to the text element.
rotationEnd	string	"bottom bottom"	The scroll trigger end point for the container rotation animation.
wordAnimationEnd	string	"bottom bottom"	The scroll trigger end point for the word opacity and blur animations. The animation will complete when the bottom of the text reaches the bottom of the container.

Customization

You can customize the animation effects using the props:

• Enable Blur: Set enableBlur={true|false} to toggle the blur effect.
• Blur Strength: Adjust the intensity of the blur effect with blurStrength={4} (higher values = stronger blur).
• Starting Opacity: Control how transparent the text starts with baseOpacity={0.1} (0 = invisible, 1 = fully visible).
• Starting Rotation: Set the initial rotation angle with baseRotation={3} (in degrees).

License

MIT