85 lines
3.9 KiB
TypeScript
85 lines
3.9 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const horizontalImages = [
|
|
{ src: '/pottery-vase.png', title: 'Handcrafted Vases', description: 'Each vase tells a story of patience and craft' },
|
|
{ src: '/pottery-bowls.png', title: 'Artisan Bowls', description: 'Organic forms inspired by nature' },
|
|
{ src: '/pottery-plates.png', title: 'Dinner Collection', description: 'Elevate your everyday dining experience' },
|
|
{ src: '/pottery-studio.png', title: 'Our Studio', description: 'Where creativity meets tradition' },
|
|
{ src: '/ceramic-cups.png', title: 'Ceramic Cups', description: 'Handmade with love and intention' },
|
|
];
|
|
|
|
const HorizontalScrollSection: React.FC = () => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
const scrollContainer = scrollRef.current;
|
|
|
|
if (!container || !scrollContainer) return;
|
|
|
|
const scrollWidth = scrollContainer.scrollWidth - window.innerWidth;
|
|
|
|
const tween = gsap.to(scrollContainer, {
|
|
x: -scrollWidth,
|
|
ease: 'none',
|
|
scrollTrigger: {
|
|
trigger: container,
|
|
start: 'top top',
|
|
end: () => `+=${scrollWidth * 0.5}`,
|
|
scrub: 1,
|
|
pin: true,
|
|
anticipatePin: 1,
|
|
},
|
|
});
|
|
|
|
return () => {
|
|
tween.scrollTrigger?.kill();
|
|
tween.kill();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={containerRef} className="relative overflow-hidden bg-clay-dark">
|
|
<div
|
|
ref={scrollRef}
|
|
className="flex h-screen items-center"
|
|
>
|
|
{horizontalImages.map((image, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative flex-shrink-0 w-[90vw] md:w-[75vw] h-screen flex items-center justify-center p-4 md:p-8"
|
|
>
|
|
<div className="relative w-full h-full max-w-5xl max-h-[80vh] overflow-hidden rounded-lg shadow-2xl group">
|
|
<img
|
|
src={image.src}
|
|
alt={image.title}
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
|
|
<div className="absolute bottom-0 left-0 p-12 text-white">
|
|
<h3 className="font-display text-5xl md:text-6xl font-light mb-4">{image.title}</h3>
|
|
<p className="font-body text-lg font-light opacity-80 max-w-md">{image.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-1/2 right-8 -translate-y-1/2 text-white/20 font-display text-[15rem] leading-none select-none pointer-events-none">
|
|
{String(index + 1).padStart(2, '0')}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-4 text-white/60">
|
|
<span className="material-symbols-outlined text-sm">arrow_back</span>
|
|
<span className="text-xs uppercase tracking-[0.3em] font-light">Scroll to explore</span>
|
|
<span className="material-symbols-outlined text-sm">arrow_forward</span>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HorizontalScrollSection;
|