GSAP ScrollTrigger + MotionPath Animation Tutorial HTML CSS JS
GSAP ScrollTrigger + MotionPath Animation Tutorial HTML CSS JS
GSAP ScrollTrigger + MotionPath Animation Tutorial HTML CSS JS
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
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
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:
motionPath: {
path: “.curve-path”,
align: “.curve-path”,
start: 0,
end: 0.2 + (i * 0.15)
}
🧱 Step 5: Features Section
The features section consists of:
✓ Overlay Background
The background is premium, textured, and creates a sense of depth.
✓ Two columns layout
Left → titles + feature items
Right → cream product image
✓ Spacing to HERO
The section’s spacing to the HERO section is defined as follows:
margin-top: -100vh;
This will give the illusion that the hero jar floats and overlaps both sections and creates a luxury magazine-style look.
🧱 Step 6: Showcase Section
The showcase section consists of:
Height of at least 100vh;
The showcase section functions as the final scene of the design;
The transition between the pinned scene takes place smoothly;
The showcase section’s clean background helps the showcase section breathe.
🧱 Step 7: Highlights of CSS (The Most Important Parts)
The Fixed Jar Wrapper
.hero__jar-wrap {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Allows GSAP to position it freely.
THE HERO TITLE
Large, central elegant typography utilizing Playfair Display on the typeface.
THE PLANTS
The plants are positioned absolutely, and they animate horizontally outwards through GSAP.
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.
Popular Posts
Explore Topics
- Card Design (4)
- Carousel (2)
- CSS and HTML (10)
- Design Synth (11)
- Form Designs (1)
- GSAP (4)
- Header Design (8)
- Hover Effect (4)
- JavaScript (9)
- Navbar Designs (4)
- Parallax (1)
- Slider Designs (2)
- Template Designs (3)
- WordPress (1)
Tag Clouds