23 lines
971 B
TypeScript
23 lines
971 B
TypeScript
import { useGSAP } from "@gsap/react"; import { useEffect, useLayoutEffect, useRef,type ReactNode } from "react";
|
|
import { useGsapContext } from "~/app/_providers/GsapProvicer";
|
|
import { SplitText } from "gsap/SplitText";
|
|
import gsap from 'gsap'
|
|
const AnimatedPageTitle = (
|
|
{ children, position }: { children: ReactNode, position:gsap.Position }
|
|
) => {
|
|
const el = useRef<HTMLHeadingElement>(null)
|
|
const gsapContext = useGsapContext();
|
|
useLayoutEffect(() => {
|
|
const split = new SplitText(el.current, { type: "lines,chars", autoSplit:true })
|
|
gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100 }),position)
|
|
gsapContext?.addAnimation(gsap.from(split.chars, { id: 'titlesplit',
|
|
stagger: 0.05, rotate: -90, opacity: 0, x: -10, onComplete: () => {split.revert()}
|
|
}),'>')
|
|
},[])
|
|
return (
|
|
<h1 className="text-4xl break-keep opacity-0 font-bold text-balance w-full" ref={el}> {children} </h1>
|
|
)
|
|
}
|
|
|
|
export default AnimatedPageTitle;
|