44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useEffect, useRef } from "react";
|
||
|
|
import gsap from "gsap";
|
||
|
|
import Image from "next/image";
|
||
|
|
|
||
|
|
const Loader = () => {
|
||
|
|
// We need a DOM node that will be the clipping container
|
||
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
|
const imgRef = useRef<HTMLImageElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const container = containerRef.current;
|
||
|
|
const img = imgRef.current;
|
||
|
|
if (!container || !img) return;
|
||
|
|
gsap.set(container, { width: "0", clipPath: "inset(0 100% 0 0)" });
|
||
|
|
gsap.to(container, {
|
||
|
|
width: "280px", // reveal left to right
|
||
|
|
duration: 1.4,
|
||
|
|
clipPath: "inset(0 0% 0 0)",
|
||
|
|
ease: "expo.inout",
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-brand fixed inset-0 z-100 flex h-screen w-full items-center justify-center">
|
||
|
|
{/* Clipping container */}
|
||
|
|
<div ref={containerRef} className="overflow-hidden pl-3">
|
||
|
|
<Image
|
||
|
|
ref={imgRef}
|
||
|
|
src="/images/svg/whispering-logo.svg"
|
||
|
|
alt="Whispering Trees"
|
||
|
|
width={280}
|
||
|
|
height={68}
|
||
|
|
className="h-[68px] w-[250px] object-contain"
|
||
|
|
priority
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Loader;
|