Package Exports

beyondcreation-animation
beyondcreation-animation/dist/dist.esm.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (beyondcreation-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.