Beyond Creation Animation Library

The Animate component is a React wrapper that utilizes GSAP (GreenSock Animation Platform) to create smooth animations triggered by scroll events. It allows for customizable animations on specified elements within your React application, enhancing user experience through engaging visual effects.

Features

• Customizable Animations: Define initial, from, and to states for your animations.
• Scroll Triggering: Easily trigger animations based on scroll position.
• Flexible Configuration: Adjust duration, delay, and other animation properties.

Installation

npm install beyondcreation-animation

import { Animate } from "beyondcreation-animation";

<Animate
  classNameOf="animate-class"
  duration={1}
  delay={0.5}
  initialValue={{ opacity: 0 }}
  animateFrom={{ y: 50 }}
  animateTo={{ y: 0, opacity: 1 }}
  triggerOptions={{ start: "top bottom", end: "bottom top" }}
  onScroll={true}
>
  <div className="animate-class">Your content here</div>
</Animate>;

Props

| Prop | Type | Default | Description | | ---------------- | ----------- | ----------- | ------------------------------------------------------------------------------------------- | | classNameOf | string | "" | CSS class name to apply to the animated elements. | | seperate | boolean | false | If true, each child element will have its own animation timeline. | | duration | number | 1 | Duration of the animation in seconds. | | delay | number | 0 | Delay before the animation starts, in seconds. | | initialValue | object | undefined | Initial CSS properties to set before the animation starts. | | animateFrom | object | undefined | CSS properties to animate from. | | animateTo | object | undefined | CSS properties to animate to. | | triggerOptions | object | {} | Options for the ScrollTrigger, including start, end, scrub, and markers. | | onScroll | boolean | false | If true, the animation will be scrubbed based on scroll position. | | markers | boolean | false | If true, GSAP will display markers for debugging the scroll trigger positions. | | children | ReactNode | undefined | Child elements to be animated. | | dependencies | Array | [] | Array of dependencies for the useEffect hook to control when the animation should re-run. |

Example

Here’s a simple example of how to use the Animate component:

<Animate
  classNameOf="fade-in"
  duration={1}
  initialValue={{ opacity: 0 }}
  animateFrom={{ y: 50 }}
  animateTo={{ y: 0, opacity: 1 }}
  triggerOptions={{ start: "top bottom", end: "bottom top" }}
  onScroll={true}
>
  <h1 className="fade-in">Hello, World!</h1>
</Animate>

Conclusion

The Animate component is a powerful tool for adding animations to your React applications. By leveraging GSAP's capabilities, you can create visually appealing effects that enhance user engagement. Customize the animations to fit your design needs and enjoy the smooth performance that GSAP provides.