File size: 2,709 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | "use client";
import { useEffect, useMemo, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import "./ScrollFloat.css";
type ScrollFloatProps = {
children: string;
scrollContainerRef?: React.RefObject<HTMLElement | null>;
containerClassName?: string;
textClassName?: string;
animationDuration?: number;
ease?: string;
scrollStart?: string;
scrollEnd?: string;
stagger?: number;
};
export default function ScrollFloat({
children,
scrollContainerRef,
containerClassName = "",
textClassName = "",
animationDuration = 1,
ease = "back.inOut(2)",
scrollStart = "center bottom+=50%",
scrollEnd = "bottom bottom-=40%",
stagger = 0.03,
}: ScrollFloatProps) {
const containerRef = useRef<HTMLHeadingElement | null>(null);
const splitText = useMemo(
() =>
children.split(" ").map((word, wordIndex, words) => (
<span className="scroll-float-word" key={`${word}-${wordIndex}`}>
{word.split("").map((char, charIndex) => (
<span className="char" key={`${char}-${charIndex}`}>
{char}
</span>
))}
{wordIndex < words.length - 1 && <span className="char"> </span>}
</span>
)),
[children],
);
useEffect(() => {
if (typeof window === "undefined") return;
gsap.registerPlugin(ScrollTrigger);
const el = containerRef.current;
if (!el) return;
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const charElements = el.querySelectorAll(".char");
if (reduceMotion) {
gsap.set(charElements, { opacity: 1, yPercent: 0, scaleY: 1, scaleX: 1 });
return;
}
const scroller = scrollContainerRef?.current || window;
const tween = gsap.fromTo(
charElements,
{
willChange: "opacity, transform",
opacity: 0,
yPercent: 120,
scaleY: 2.3,
scaleX: 0.7,
transformOrigin: "50% 0%",
},
{
duration: animationDuration,
ease,
opacity: 1,
yPercent: 0,
scaleY: 1,
scaleX: 1,
stagger,
scrollTrigger: {
trigger: el,
scroller,
start: scrollStart,
end: scrollEnd,
scrub: true,
},
},
);
return () => {
tween.scrollTrigger?.kill();
tween.kill();
};
}, [animationDuration, ease, scrollContainerRef, scrollEnd, scrollStart, stagger]);
return (
<h2 ref={containerRef} className={`scroll-float ${containerClassName}`.trim()}>
<span className={`scroll-float-text ${textClassName}`.trim()}>{splitText}</span>
</h2>
);
}
|