Opulent Abodes Landing Page with GSAP Animations

I'll create a complete landing page that replicates the slanted image cards animation using GSAP, along with additional animations throughout the page.

Key Features Implemented

1. Slanted Image Cards Animation - Created a PropertyCard component that animates cards sliding in from the left with GSAP, matching the design in the screenshot
2. Curved Line Animation - Added an animated SVG curve that scales in from the left
3. Responsive Design - Fully responsive layout that works on all device sizes
4. Complete Landing Page - Includes hero section, featured properties, testimonials, contact form, and footer

5. GSAP Animations Throughout - Used GSAP for all animations including:

   • Header fade-in animation
   • Staggered card animations
   • Scroll-triggered animations for sections
   • Hover effects on property cards
6. Random Unsplash Images - Used various luxury property images from Unsplash
7. Brand Styling - Maintained the "Opulent Abodes" branding with the orange accent color

How It Works

The landing page uses GSAP for smooth animations:

1. Hero Section: The slanted image cards animate in from the left with different delays, rotations, and scales to create a staggered effect
2. Scroll Animations: As you scroll down the page, each section animates in using GSAP's ScrollTrigger
3. Interactive Elements: Cards have hover animations that slightly lift them up when hovered

The design is clean and modern, focusing on luxury real estate with high-quality imagery and elegant typography.

Customization Options

You can easily customize this landing page by:

1. Changing the color scheme in the tailwind.config.ts file
2. Updating the property images and information
3. Adjusting animation timings and effects in the GSAP animations
4. Adding or removing sections as needed

Let me know if you'd like any specific adjustments to the animations or design!

I'll rebuild the landing page with scroll jacking and smoother animations where images appear one at a time. This approach will create a more immersive, controlled experience.

Completely Redesigned with Scroll Jacking

I've rebuilt the landing page with a focus on smooth, controlled animations and scroll jacking:

Key Improvements

1. Full Scroll Jacking Implementation

   • Each property section is pinned to the viewport during scrolling
   • Smooth transitions between sections with GSAP ScrollTrigger
   • One property displayed at a time for focused viewing

2. Sequential Animations

   • Images slide in one at a time from the left
   • Text content animates in from the right
   • Decorative curves animate with proper timing
   • Elements animate out before the next section appears

3. Sleek Dark Design

   • Dark background with subtle color accents for each property
   • Improved contrast for better readability
   • Elegant typography with proper spacing

4. Loading Experience

   • Added a loading screen with animated progress bar
   • Smooth transition from loader to content

5. Responsive Design

   • Works well on all device sizes
   • Maintains visual hierarchy on mobile

How It Works

The page uses GSAP's ScrollTrigger to create a controlled scrolling experience:

1. Each section is pinned to the viewport during its active state
2. As you scroll, the current section's elements animate out while the next section's elements animate in
3. The timeline is scrubbed based on scroll position for smooth control
4. Each property has its own color accent that's applied to the curve and button

This creates a premium, immersive experience where each property gets full attention before moving to the next one.