Jesko Jets is a high-end, animated landing page designed for a private aviation operator. It offers a seamless and visually stunning journey through the world of luxury travel, leveraging advanced scroll-based animations to create a premium digital experience.
- Premium Scroll Animations: Built with GSAP and ScrollTrigger for a cinematic, depth-filled experience (parallax, scaling, and entrance effects).
- Smooth Scroll Logic: Integrated with
lenisfor buttery-smooth scrolling that enhances the user journey. - Interactive Components: Elegant hover states and micro-animations using Framer Motion.
- Performance First: Optimized with Next.js 15+ and modern web standards.
- Responsive Excellence: Fully responsive design tailored for mobile, tablet, and desktop viewports.
- Visual Storytelling: A layered "hero" section that mimics a cockpit/window view, pulling users into the experience.
- Framework: Next.js (App Router)
- Animation: GSAP & ScrollTrigger
- Gestures/Transitions: Framer Motion
- Smooth Scroll: Lenis
- Styling: Tailwind CSS
- Icons: Lucide React
src/
├── app/ # Next.js App Router (Layouts, Pages, Providers)
├── assets/ # Visual assets (Images, Logos, SVGs)
└── components/ # Reusable UI components
├── Hero/ # Main animation-heavy landing section
├── Navbar/ # Dynamic navigation system
└── About/ # Content sections with reveal animations
- Node.js (Latest LTS recommended)
- npm or yarn
-
Clone the repository:
git clone https://github.com/Thakuma07/JeskoJets-ScrollAnimation.git cd jesko-jets-animated-main -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser: Navigate to
http://localhost:3000to see the results.
- Scroll Pinning: The main hero section uses GSAP
pinto hold the view while internal animations (like scaling the "window") occur. - GSAP Context: Uses
@gsap/reactfor safe cleaning of animations in React's development mode. - Z-Index Strategy: Specific layering in
SmoothScrollHero.jsxensures the logo remains interactive while the "sky" moves behind it.