Luxury Perfume Website Animation with GSAP

Overview

This is an interactive high–end perfume website that provides a luxurious moment for the user. It employs elegant typography, smooth GSAP animations, and a cinematic video background to offer a browsing experience that is all–consuming. The layout reflects how modern magazines are created but engages the user with motion-based storytelling that suits showcasing luxury perfume collections.

Project Structure

Before we begin, create the following file structure:

luxury perfume website/
│
├── index.html
├── style.css
├── script.js
└── images/
├── perfume1.png
├── perfume2.png
└── logo.png

🧱 Step 1: Navbar

A minimal fixed position nav at the top, with:

Brand logo on the left
Navigation icons (search, cart, and menu) on the right to improve user experience
Remix Icons to maintain modern aesthetics.

🧱 Step 2: Hero Section

This section grabs the user‘s attention right away with a bold heading, a short tagline, and a button that triggers animations.

<div class=”hero-text”>
<h5>THE ESSENCE OF ELEGANCE</h5>
<h1>EXPERIENCE THE LUXURY PERFUME COLLECTION</h1>
<button class=”btn explore-btn” id=”exploreBtn”>EXPLORE</button>
</div>

Smooth animation for entering content, using GSAP (gsap.from() and ScrollTrigger).
Background shapes fade and slide in to provide luxurious vibes.
The Explore button triggers the user into a deeper “Explore Mode.“

🧱 Step 3: Video Section 🎥

Adding a video section in this layout allows for improved storytelling, and a more immersive brand feel.

The background can be a video or clip of product reveal that repeats seamlessly.

Reasons for adding:

Entices the personality of a cinematic and luxurious perfume brand.
Helps users create emotional connections with the fragrance and the story they are about to enjoy.
And adds depth of visuals, is interactive, and then scrolls into view with GSAP animation.

HTML Example:

<section class=”video-section”>
<video autoplay muted loop playsinline>
<source src=”images/perfume-ad.mp4″ type=”video/mp4″>
</video>
<div class=”video-overlay”>
<h2>Luxury That Speaks in Fragrance</h2>
</div>
</section>

GSAP Animation Example:

gsap.from(“.video-overlay h2”, {
scrollTrigger: “.video-section”,
y: 100,
opacity: 0,
duration: 1.2,
ease: “power3.out”
});

🧱 Step 4: Explore Mode

After clicking the “Explore“ button, the least shifts to an explore mode. The mode includes much larger images with close–up views of the product, and offers at least three variations of color and pricing.

const body = document.body;
const exploreBtn = document.getElementById(“exploreBtn”);
const backBtn = document.getElementById(“backBtn”);

exploreBtn.addEventListener(“click”, () => {
body.classList.add(“explore-active”);
});

backBtn.addEventListener(“click”, () => {
body.classList.remove(“explore-active”);
});

🧱 Step5: Footer

Includes:

Social icons
Brand information
Animated footer text that fades in with GSAP

<footer>
<div class=”social icons”>
<a href=”#”><i class=”ri-twitter-fill”></i></a>
<a href=”#”><i class=”ri-instagram-fill”></i></a>
<a href=”#”><i class=”ri-facebook-fill”></i></a>
</div>
<p>© 2025 KUUM Perfume. All Rights Reserved.</p>
</footer>

This code enables the website to be fully interactive without an external animation library, and provides simple yet dynamic transitions.

🧱 Step6: Footer & Social Links

The footer includes:

Attribution to the developer
Animated social media icons that raise and glow on hover.

<footer>
<div class=”social icons”>
<a href=”#”><i class=”ri-twitter-fill”></i></a>
<a href=”#”><i class=”ri-instagram-fill”></i></a>
<a href=”#”><i class=”ri-facebook-fill”></i></a>
</div>
<p>© 2025 KUUM Perfume. All Rights Reserved.</p>
</footer>

✨ Features

GSAP – Animations in to scene, and revealing the hero font, along with some of the video overlaying fade in animations.
Video – Not only does a product give you an emotional experience, but video adds motion.
Responsive – On finish, Responsive and beautifully laid out down to phone size
Explore Mode – Redesigned the layout in to an explore layout with transition Button
Effects – Animated hover button interaction effects and changing background colour

🧩 Technologies Used

HTML5 & CSS3 for structure and styling
GSAP + ScrollTrigger for animation and transitions
Remix Icons for clean iconography
Flexbox / Grid for responsive layouts.

Website Header with Slider HTML, CSS & JavaScript

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.

Explore Topics

Overview

Project Structure

Before we begin, create the following file structure:

luxury perfume website/
│
├── index.html
├── style.css
├── script.js
└── images/
├── perfume1.png
├── perfume2.png
└── logo.png

🧱 Step 1: Navbar

A minimal fixed position nav at the top, with:

Brand logo on the left
Navigation icons (search, cart, and menu) on the right to improve user experience
Remix Icons to maintain modern aesthetics.

🧱 Step 2: Hero Section

This section grabs the user‘s attention right away with a bold heading, a short tagline, and a button that triggers animations.

<div class=”hero-text”>
<h5>THE ESSENCE OF ELEGANCE</h5>
<h1>EXPERIENCE THE LUXURY PERFUME COLLECTION</h1>
<button class=”btn explore-btn” id=”exploreBtn”>EXPLORE</button>
</div>

Smooth animation for entering content, using GSAP (gsap.from() and ScrollTrigger).
Background shapes fade and slide in to provide luxurious vibes.
The Explore button triggers the user into a deeper “Explore Mode.“

🧱 Step 3: Video Section 🎥

Adding a video section in this layout allows for improved storytelling, and a more immersive brand feel.

The background can be a video or clip of product reveal that repeats seamlessly.

Reasons for adding:

Entices the personality of a cinematic and luxurious perfume brand.
Helps users create emotional connections with the fragrance and the story they are about to enjoy.
And adds depth of visuals, is interactive, and then scrolls into view with GSAP animation.

HTML Example:

GSAP Animation Example:

gsap.from(“.video-overlay h2”, {
scrollTrigger: “.video-section”,
y: 100,
opacity: 0,
duration: 1.2,
ease: “power3.out”
});

🧱 Step 4: Explore Mode

const body = document.body;
const exploreBtn = document.getElementById(“exploreBtn”);
const backBtn = document.getElementById(“backBtn”);

exploreBtn.addEventListener(“click”, () => {
body.classList.add(“explore-active”);
});

backBtn.addEventListener(“click”, () => {
body.classList.remove(“explore-active”);
});

🧱 Step5: Footer

Includes:

Social icons
Brand information
Animated footer text that fades in with GSAP

This code enables the website to be fully interactive without an external animation library, and provides simple yet dynamic transitions.

🧱 Step6: Footer & Social Links

The footer includes:

Attribution to the developer
Animated social media icons that raise and glow on hover.

✨ Features

GSAP – Animations in to scene, and revealing the hero font, along with some of the video overlaying fade in animations.
Video – Not only does a product give you an emotional experience, but video adds motion.
Responsive – On finish, Responsive and beautifully laid out down to phone size
Explore Mode – Redesigned the layout in to an explore layout with transition Button
Effects – Animated hover button interaction effects and changing background colour

🧩 Technologies Used

HTML5 & CSS3 for structure and styling
GSAP + ScrollTrigger for animation and transitions
Remix Icons for clean iconography
Flexbox / Grid for responsive layouts.

Website Header with Slider HTML, CSS & JavaScript

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

Design Synth

Explore Topics

Overview

Project Structure

Before we begin, create the following file structure:

luxury perfume website/
│
├── index.html
├── style.css
├── script.js
└── images/
├── perfume1.png
├── perfume2.png
└── logo.png

🧱 Step 1: Navbar

A minimal fixed position nav at the top, with:

Brand logo on the left
Navigation icons (search, cart, and menu) on the right to improve user experience
Remix Icons to maintain modern aesthetics.

🧱 Step 2: Hero Section

This section grabs the user‘s attention right away with a bold heading, a short tagline, and a button that triggers animations.

<div class=”hero-text”>
<h5>THE ESSENCE OF ELEGANCE</h5>
<h1>EXPERIENCE THE LUXURY PERFUME COLLECTION</h1>
<button class=”btn explore-btn” id=”exploreBtn”>EXPLORE</button>
</div>

Smooth animation for entering content, using GSAP (gsap.from() and ScrollTrigger).
Background shapes fade and slide in to provide luxurious vibes.
The Explore button triggers the user into a deeper “Explore Mode.“

🧱 Step 3: Video Section 🎥

Adding a video section in this layout allows for improved storytelling, and a more immersive brand feel.

The background can be a video or clip of product reveal that repeats seamlessly.

Reasons for adding:

Entices the personality of a cinematic and luxurious perfume brand.
Helps users create emotional connections with the fragrance and the story they are about to enjoy.
And adds depth of visuals, is interactive, and then scrolls into view with GSAP animation.

HTML Example:

GSAP Animation Example:

gsap.from(“.video-overlay h2”, {
scrollTrigger: “.video-section”,
y: 100,
opacity: 0,
duration: 1.2,
ease: “power3.out”
});

🧱 Step 4: Explore Mode

const body = document.body;
const exploreBtn = document.getElementById(“exploreBtn”);
const backBtn = document.getElementById(“backBtn”);

exploreBtn.addEventListener(“click”, () => {
body.classList.add(“explore-active”);
});

backBtn.addEventListener(“click”, () => {
body.classList.remove(“explore-active”);
});

🧱 Step5: Footer

Includes:

Social icons
Brand information
Animated footer text that fades in with GSAP

This code enables the website to be fully interactive without an external animation library, and provides simple yet dynamic transitions.

🧱 Step6: Footer & Social Links

The footer includes:

Attribution to the developer
Animated social media icons that raise and glow on hover.

✨ Features

GSAP – Animations in to scene, and revealing the hero font, along with some of the video overlaying fade in animations.
Video – Not only does a product give you an emotional experience, but video adds motion.
Responsive – On finish, Responsive and beautifully laid out down to phone size
Explore Mode – Redesigned the layout in to an explore layout with transition Button
Effects – Animated hover button interaction effects and changing background colour

🧩 Technologies Used

HTML5 & CSS3 for structure and styling
GSAP + ScrollTrigger for animation and transitions
Remix Icons for clean iconography
Flexbox / Grid for responsive layouts.

Website Header with Slider HTML, CSS & JavaScript

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

Design Synth

Explore Topics

Post Views: 45