Design Synth

Facebook Pinterest Youtube
Menu

GSAP ScrollTrigger + MotionPath Animation Product Website Tutorial HTML CSS JS

by

GSAP ScrollTrigger + MotionPath Animation Tutorial HTML CSS JS

GSAP ScrollTrigger + MotionPath Animation Tutorial HTML CSS JS

GSAP ScrollTrigger + MotionPath Animation Tutorial HTML CSS JS

bg (5)

Overview

This project is a premium skincare landing page that uses a combination of fixed and animate-on-scroll elements, along with smooth motion paths. By employing HTML + CSS + GSAP we created:

 

  • A floating jar with a skincare label
  • Hero text with plant images sliding out
  • Ingredient “cards” which slide along a curved SVG path
  • Features section with overlay reveal
  • Last clean showcase section

Through this project we achieved a luxurious, cinematic scrolling experience that meets our client’s expectations.

🧱 Step 1: HTML Structure Explanation

The HTML structure has five main layers.

A. The Fixed Jar Wrapper

<div class=”hero__jar-wrap”>
         <img class=”jar__lid”>
         <img class=”jar__body”>
</div>

Why is it fixed?

As GSAP animates the jar, it remains in the center of the screen with a fixed position the entire time it moves. This causes the lid and jar body to move independently and generate a floating effect.

B. Header

A transparent header that contains the logo and navigation links, which is located above the hero section.

<header class=”site-header”>…</header>

The header will blend into the top of the hero section due to its transparency.

C. Hero Section

The Hero Section will consist of:

  • A large title graphic for Freesias
  • There will be two images depicting plants (one on the left and one on the right).
  • Additionally, the Ingredients section contains a series of curved panels that will have a fixed position.

With this layout, I see a multi-layered cinematic experience being created.

D. Ingredient Card(s) plus SVG Curve

Ingredients Cards and SVG curves will reside in the Hero Section

<svg class=”curve-svg” viewbox=”0 0 200 100″>
         <path class=”curve-path” d=”M 5 5 A 100 100 0 0 0 205 5″ fill=”none” strock=”transparent”></path>
</svg>
Why this is essential:

  • The path is used by MotionPathPlugin

  • Each ingredient card travels along the curve

  • Smooth organic movement adds premium visual storytelling

E. Features Section

A Completely Oversized Section Above the Hero Section, which has: 

margin-top: -100vh;

This allows the cream jar to appear to float over both the Hero Section and the Features Section.

Left side → text & feature items
Right side → large product cream image

Also includes a soft overlay + background image for depth.

F. Showcase Section

A “Clean” section for your viewer to take a moment to “rest” their eyes.

This Section will be displayed Full Screen with a Centered Layout.

🧱 Step 2: Why .hero__jar-wrap is Outside All Sections

The main purpose of the .hero__jar-wrap outside of any of the 3 main sections is 1 of the most important decisions for the overall architecture of this website.

Reason 1 — It must stay fixed

The jar can have movements through all 3 sections.

  • If the jar is located inside the HERO section, it would scroll away when the user scrolls down in the browser.
  • The jar animations don’t follow the GSAP Pinned Animation.
  • Any other movements that the jar would need to follow would be above or below any other layer.
Reason 2 — To animate globally

As the jar’s movements can happen through all 3 sections and they are all happening in different locations.

By putting .hero__jar-wrap outside of the sections, it will always be able to animate it globally.

Reason 3 — It’s visually layered above everything

The z-index of 1000 will provide the developer with full control over how all the layers stack.

This is a very common practice in creating GSAP websites.

🧱 Step 3: SVG Curve Path Explanation

The path:

M 5 5 A 100 100 0 0 0 205 5

M 5 5 A 100 100 0 0 0 205 5

Path Breakdown:

 

  • M 5 5 Move to the starting point
  • A 100 100 Draw an arc with a radius of 100
  • Inside 0 0 0: Arc flags (direction, rotation, and sweep)
  • 205 5 Ending point for the arc

The gentle curve is a great way to create smooth animation movements for each ingredient card.

GSAP maps the location of each ingredient card on this path using:

🧱 Step 3: Responsive Animated Navbar

The navigation bar for this project will consist of:

  • Logo
  • Search Icon
  • Cart Icon
  • Animated Hamburger Icon
  • Stagger Fade Navigation Items
HTML:

<nav class=”navbar”>
     <div class=”navbar__logo”>
          <img src=”logo.png” alt=”logo”>
     </div>

     <ul class=”navbar__menu” id=”navbar__menu-links”>
          <li class=”navbar__menu-item”><a href=”#”>Home</a></li>
          <li class=”navbar__menu-item”><a href=”#”>About</a></li>
          <li class=”navbar__menu-item”><a href=”#”>Hoodies</a></li>
          <li class=”navbar__menu-item”><a href=”#”>Collection</a></li>
          <li class=”navbar__menu-item”><a href=”#”>Contact</a></li>
    </ul>

CSS:

menuIcon.addEventListener(‘click’, () => {
     navLinks.classList.toggle(‘open’);

 

     if (navLinks.classList.contains(‘open’)) {
       menuIconChild.classList.replace(‘ri-menu-4-fill’,’ri-close-large-line’);

     

       menuItems.forEach((item, index) => {
             setTimeout(() => item.classList.add(‘show’), index * 100);
       });

 

     } else {
       menuIconChild.classList.replace(‘ri-close-large-line’,’ri-menu-4-fill’);
       menuItems.forEach(item => item.classList.remove(‘show’));
     }
});

When the user hovers over each item on the navigation bar, it will fade in with a smooth downward animation.

🧱 Step 4: Hero Section with a 3D Layered Textand a Beautiful Main Hoodie

The hero section contains:

  1. A very stylish handwritten cursive winter tagline,
  2. An extremely bold stretched HOODIE title,
  3. The main hoodie image,
  4. Perfect z-index at the right spot for layering, and
  5. Glassmorphism cards behind the main hoodie image.
HTML:

<div class=”hero__text”>
     <h4>Winter Special</h4>
     <h1>HOODIE</h1>
</div>

<div class=”hero__image”>
     <img src=”hoodie.png” alt=”hoodie”>
</div>

CSS:

.hero__text h1 {
    transform: scale(1, 1.5);
    letter-spacing: 5px;
}

The way the typography is laid out also gives off a high-end luxury feel to the hoodie.

🧱 Step 5: Floating Glassmorphism Info Panels

Behind the hoodie are two floating frosted information panels that list the following features:

  • Qualitiy of Material
  • Comfort Level 
  • Durability 
  • Quality Stitching 
CSS:

.info__box {
    width: 650px;
    background: var(–glass-morphism);
    backdrop-filter: blur(20px);
    border-radius: 15px;
    border: 1px solid var(–primary-color);
    padding: 30px 60px;
    position: absolute;
}

 

.info__box.left { left: -1%; bottom: 30%; }
.info__box.right { right: -1%; top: 30%; }

A great way to present something new and classy!

🧱 Step 6: Footer with Contact, Order, and Social Media Icons

The footer contains:

  • A contact number
  • ORDER NOW button
  • Shopping cart icon
  • Glassmorphism social media icons
  • Hover interaction. HTML and Hover Glow Effects are used.
HTML:

<div class=”orderBox”>
    <div class=”orderIcon”><i class=”ri-shopping-cart-2-line”></i></div>
    <button class=”orderBtn”>ORDER NOW!</button>
</div>

Hover Glow Effect:

.orderBox:hover .orderIcon,
.orderBox:hover .orderBtn {
     border-color: #ffc800;
     transform: translateY(-2px);
}

This provides a premium winter look!

✨ Final Result - What you've built!

  • A high-end animated hoodie web page
  • Fully responsive mobile navigation systems
  • A glassmorphism hero section styled for winter
  • New extreme stretched HOODIE typeface
  • Two floating frosted informational boxes
  • A frosted nav bar with animations
  • A section for ordering and social media with neon flashes on hover.
  • Great for winter brands, clothing sellers, eCommerce stores, showcasing products, etc!

Previous Post

Modern Bootstrap Login Form | Responsive UI Design

Related Post

Modern Product Showcase UI Design | HTML CSS JS E-Commerce Tutorial

Design Synth

Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.

Facebook Pinterest Youtube

Popular Posts

4 (1)
No posts found

Explore Topics

4 (1)

Tag Clouds

4 (1)
Post Views: 2