`<GsapAnimation />`

GsapAnimation lets you use the GreenSock Animation Platform (GSAP) in a fully declarative way. It abstracts away the direct use of the GSAP Tween and Timeline functions.

Wrap the GsapAnimation around any HTML tags or components that you want to animate.

Checkout the Gsap Docs (opens in a new tab) for more information.

Code - structure

import { Power3 } from "gsap";
import GsapAnimation from '../components/Gsap';
 
{/* FadeIn Example */}
<GsapAnimation
  animation={{ opacity: 1, duration: 1, ease: Power3.easeInOut }}
  className="opacity-0">
  ... your component or html tags
</GsapAnimation>
 
{/* FadeInUp Example */}
<GsapAnimation
  animation={{ opacity: 1, y: 0, duration: 1, ease: Power3.easeInOut }}
  className="opacity-0 translate-y-[50px]">
  ... your component or html tags
</GsapAnimation>
 
{/* ClipPath Example */}
<GsapAnimation
  as='div'
  animation={{ clipPath: "inset(0 100% 0 0)", duration: 1, ease: Power3.easeInOut }}
  className="bg-white absolute [clip-path:inset(0_0_0_0)]"
>
  ... your component or html tags
</GsapAnimation>

Checkout the HomeFAQpage section from /Garuda/src/app/sections/HomeFAQpage.jsx for more animation examples.

Props

Option's (props)	Values
as	Set a custom element for this component, supprts HTML tags.
animation	Its an object in which you can add the animation properties. it will work as `gsap.to(element, {yourAnimation}`)
className	Custom css className (optional).

Floatinginput Imagegrid