45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
type HeadlineProps = {
|
|
text: string;
|
|
};
|
|
|
|
const Headline: React.FC<HeadlineProps> = ({ text }) => {
|
|
const headlineRef = useRef<HTMLHeadingElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!headlineRef.current) return;
|
|
|
|
gsap.from(headlineRef.current, {
|
|
y: 80,
|
|
opacity: 0,
|
|
duration: 1,
|
|
ease: "expo.out",
|
|
scrollTrigger: {
|
|
trigger: headlineRef.current,
|
|
start: "top 90%",
|
|
toggleActions: "play none none none",
|
|
},
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="overflow-hidden">
|
|
<h6
|
|
ref={headlineRef}
|
|
className="bg-light-300 border-border font-switzer sm:text-b-4-14 tab:text-b-3-16 text-border sm:leading-b4 tab:leading-b2 tab:px-4 w-max rounded-full border py-1.5 font-normal sm:px-2.5"
|
|
>
|
|
{text}
|
|
</h6>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Headline;
|