46 lines
972 B
TypeScript
46 lines
972 B
TypeScript
"use client"
|
|
import gsap from "gsap";
|
|
import { type HTMLAttributes, type ReactNode, useRef } from "react";
|
|
import { useReveal } from "./useReveal";
|
|
|
|
const AnimatedDiv = (
|
|
{
|
|
children,
|
|
position,
|
|
className,
|
|
animationMode = 'to',
|
|
scrollOnly = false,
|
|
once = false,
|
|
debugId,
|
|
...tweenVars
|
|
}:
|
|
gsap.TweenVars & {
|
|
children: ReactNode,
|
|
position: gsap.Position,
|
|
animationMode?: 'from' | 'to',
|
|
scrollOnly?: boolean,
|
|
once?: boolean,
|
|
debugId?: string,
|
|
className?: HTMLAttributes<HTMLDivElement>['className']
|
|
}
|
|
) => {
|
|
const div = useRef<HTMLDivElement>(null)
|
|
useReveal(div, {
|
|
position,
|
|
scrollOnly,
|
|
once,
|
|
debugId,
|
|
makeReveal: (el) =>
|
|
animationMode === 'from'
|
|
? gsap.from(el, { ...tweenVars, paused: true })
|
|
: gsap.to(el, { ...tweenVars, paused: true }),
|
|
})
|
|
return (
|
|
<div ref={div} className={className}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AnimatedDiv;
|