Skip to content
Projects

Thakuma07/JeskoJets-ScrollAnimation

View on GitHub

Thakuma07/JeskoJets-ScrollAnimation has 26 GitHub stars and 10 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-15 05:57 UTC. Last push 2026-02-07.

How these counts are measured

26 stars10 Forks

What you can do

  • Premium Scroll Animations: Built with GSAP and ScrollTrigger for a cinematic, depth-filled experience (parallax, scaling, and entrance effects).
  • Smooth Scroll Logic: Integrated with lenis for 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.

Measured star growth

in 24h
0
in 7 days
Collecting history
in 15 days
Collecting history
in 1 month
Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

About

Instead of scrolling past the hero, we scroll into it. In this video, I break down a window-style 3D 3d scroll animation websitescroll animation built with HTML, CSS, JavaScript, GSAP, and ScrollTrigger

Creative & Media

README.md

Original

🛩️ Jesko Jets - Luxury Aviation Experience

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.

Screenshot (250)

✨ Key Features

  • Premium Scroll Animations: Built with GSAP and ScrollTrigger for a cinematic, depth-filled experience (parallax, scaling, and entrance effects).
  • Smooth Scroll Logic: Integrated with lenis for 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.

🛠️ Tech Stack

📂 Project Structure

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

🚀 Getting Started

Prerequisites

  • Node.js (Latest LTS recommended)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/Thakuma07/JeskoJets-ScrollAnimation.git
cd jesko-jets-animated-main

  2. Install dependencies:

    npm install

  3. Run the development server:

    npm run dev

  4. Open your browser: Navigate to http://localhost:3000 to see the results.

💡 Implementation Notes

  • Scroll Pinning: The main hero section uses GSAP pin to hold the view while internal animations (like scaling the "window") occur.
  • GSAP Context: Uses @gsap/react for safe cleaning of animations in React's development mode.
  • Z-Index Strategy: Specific layering in SmoothScrollHero.jsx ensures the logo remains interactive while the "sky" moves behind it.