42 lines
974 B
TypeScript
42 lines
974 B
TypeScript
import gsap from "gsap";
|
|
import { type HTMLAttributes,
|
|
type ReactNode, useLayoutEffect, useRef } from "react";
|
|
import { useGsapContext } from "~/app/_providers/GsapProvicer";
|
|
const AnimatedDiv = (
|
|
{
|
|
children,
|
|
position,
|
|
className,
|
|
animationMode='to',
|
|
...tweenVars
|
|
}:
|
|
gsap.TweenVars & {
|
|
children:ReactNode,
|
|
position:gsap.Position,
|
|
animationMode?: 'from'|'to',
|
|
className?:HTMLAttributes<HTMLDivElement>['className']
|
|
}
|
|
) => {
|
|
const div = useRef<HTMLDivElement>(null);
|
|
const gsapContext = useGsapContext()
|
|
useLayoutEffect(() => {
|
|
let tween:gsap.core.Tween;
|
|
switch(animationMode) {
|
|
case 'from':
|
|
tween = gsap.from(div.current,tweenVars);
|
|
break;
|
|
case 'to':
|
|
tween = gsap.to(div.current,tweenVars);
|
|
break;
|
|
}
|
|
gsapContext?.addAnimation(tween,position)
|
|
},[])
|
|
return (
|
|
<div ref={div} className={className}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AnimatedDiv;
|