Build a horizontal scroll website using:Next.js 14 with the App RouterTailwind CSS v4GSAP for animationsParticles.js for background effects🧩 Features Required:Horizontal Scroll LayoutAll sections scroll horizontally, not vertically.The layout must be fully responsive (desktop & mobile).Auto Snap / Section Reveal BehaviorAs the user scrolls, the next section snaps into view.When reaching Section 3, animate the first card image to appear from the top to its position (GSAP animation).AnimationsSmooth GSAP animations when sections or elements enter the viewport.Use ScrollTrigger to detect when a section is in view and trigger animations accordingly.Final Logo MovementOn the last section (e.g., Section 5), a logo moves or animates as the user scrolls past it.Auto Layout AdjustmentAll sections and elements should scale correctly across screen sizes (mobile, tablet, desktop).Particles BackgroundAdd Particles.js as a background effect for one or more sections.Next.js 14 App RouterTailwind CSS v4GSAP + ScrollTriggerParticles.jsFully Responsive & Mobile Firstuse the image for references added!
I'll create a horizontal scroll website based on the Sayyal Health Services design you've provided. This will feature smooth GSAP animations, particles background effects, and responsive design with Next.js 14 and Tailwind CSS v4.
I've created a comprehensive horizontal scroll website based on your Sayyal Health Services design with all the requested features:
Key Features Implemented:
Horizontal Scroll Layout
- All sections scroll horizontally using GSAP ScrollTrigger
- Smooth, continuous horizontal navigation
- Fully responsive across all device sizes
Auto Snap & Section Reveal
- Sections automatically snap into view as you scroll
- Each section has entrance animations when it comes into viewport
- Special card image animation in Section 3 (Business section) that slides from top
GSAP Animations
- Hero Section: Title and subtitle fade in with stagger
- Caduceus Section: Logo scales and rotates into view
- Business Section: Image slides from top, content from right
- Services Section: Cards animate with scale and stagger
- Quick Links: Logos rotate and scale with back ease
- About Section: Images slide from left, content from right
- Testimonials: Smooth entrance animations
- Medical Services: Title scales, images rotate in
- Contact Section: Final logo movement animation with rotation and floating motion
Particles Background
- Custom particles system with floating bubbles
- Connects nearby particles with lines
- Subtle blue theme matching the medical aesthetic
Responsive Design
- Mobile-first approach with Tailwind CSS v4
- Adapts layouts for mobile, tablet, and desktop
- Touch-friendly navigation on mobile devices
Technical Stack
- Next.js 14 with App Router
- Tailwind CSS v4 for styling
- GSAP + ScrollTrigger for animations
- Custom Particles.js implementation
- TypeScript for type safety
Special Animations
- Section 3 Card Animation: Image slides from top when section enters view
- Final Logo Movement: Logo in contact section moves and rotates as user scrolls past
- Smooth Transitions: All sections have custom entrance animations
- Particle Effects: Background particles create an engaging medical atmosphere
The website captures the professional medical aesthetic from your reference images while providing a modern, interactive horizontal scrolling experience. Each section is carefully crafted to match the original designs with enhanced animations and responsiveness.