Back to Components
Scroll Effect Parallax with Smooth Scrolling
Component

Scroll Effect Parallax with Smooth Scrolling

CodewithLord
January 30, 2026

An advanced scroll animation project featuring parallax effects, smooth scrolling with ScrollSmoother, and synchronized timeline animations. Uses GSAP ScrollTrigger and ScrollSmoother for seamless scroll-based interactions with hero cover scaling, text fading, and filter transitions.

🧠 Description

This project showcases an elegant parallax scroll effect using GSAP's ScrollSmoother and ScrollTrigger plugins.

The animation features a hero section with a parallax image that scales and transforms as users scroll, combined with smooth scrolling for enhanced user experience.

Additional effects include overlay opacity transitions, title animations, and text fade-out sequences that trigger at specific scroll positions.

The design creates an immersive storytelling experience perfect for landing pages, portfolio showcases, and content-heavy websites.


💻 HTML Code


1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div id="smooth-wrapper">
11    <div id="smooth-content">
12      <main>
13        <div class="hero-container">
14          <section class="hero">
15            <div class="hero__content">
16              <div class="hero__bg"></div>
17              <h1 class="hero__title">Hobbiton</h1>
18            </div>
19
20            <div class="hero__cover">
21              <img
22                class="hero__cover-img"
23                src="https://assets.codepen.io/204808/hobbit-hole.png"
24                alt=""
25              />
26            </div>
27          </section>
28        </div>
29
30        <section class="section-stick">
31          <p class="opacity-reveal">
32            If ever you are passing my way, don't wait to knock! Tea is at four;
33            but any of you are welcome at any time.
34          </p>
35        </section>
36
37        <section class="hobbiton">
38          <img
39            class="hobbiton-img"
40            src="https://assets.codepen.io/204808/hobbiton.jpg"
41            alt=""
42          />
43        </section>
44      </main>
45    </div>
46  </div>
47
48  <!-- GSAP -->
49  <script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
50  <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
51  <script src="https://unpkg.com/gsap@3/dist/ScrollSmoother.min.js"></script>
52
53  <script src="script.js"></script>
54</body>
55
56</html>

HTML Structure Explanation

The HTML uses a wrapper and content structure specifically designed for ScrollSmoother:

Key Elements:

  • #smooth-wrapper - Outer container required by ScrollSmoother plugin
  • #smooth-content - Inner wrapper that scrolls smoothly
  • .hero-container - Main hero section container
  • .hero - Hero content area with full viewport height
  • .hero__content - Contains background image and title
  • .hero__bg - Background image layer that parallaxes
  • .hero__title - Text that animates during scroll
  • .hero__cover - Overlay layer with image that scales during scroll
  • .section-stick - Sticky text section that fades on scroll
  • .hobbiton - Final image section

The nested structure allows ScrollSmoother to apply smooth scrolling effects to the entire page while individual sections trigger GSAP animations.

External GSAP plugins (ScrollTrigger and ScrollSmoother) are loaded via CDN.


🎨 CSS Code


1:root {
2  --black: #1f1f1f;
3  --white: #ffffff;
4}
5
6body {
7  margin: 0;
8  background: var(--black);
9  color: var(--white);
10  font-family: Roboto, sans-serif;
11}
12
13/* ---------------- HERO ---------------- */
14
15.hero-container {
16  position: relative;
17}
18
19.hero {
20  position: relative;
21  height: 100vh;
22  overflow: hidden;
23}
24
25.hero__content {
26  position: relative;
27  height: 100vh;
28}
29
30.hero__bg {
31  height: 100vh;
32  width: 100%;
33  background: url("https://assets.codepen.io/204808/hobbiton.jpg") center/cover
34    no-repeat;
35  filter: blur(3px) brightness(1.5);
36  will-change: filter, transform;
37}
38
39.hero__title {
40  position: absolute;
41  top: 50%;
42  left: 50%;
43  transform: translate(-50%, -50%) scale(0.5);
44  font-size: clamp(3rem, 15vw, 12rem);
45  opacity: 0;
46  filter: blur(10px);
47  color: #111;
48  z-index: 10;
49}
50
51/* ---------------- COVER ---------------- */
52
53.hero__cover {
54  --overlay-opacity: 1;
55  position: absolute;
56  inset: 0;
57  z-index: 2;
58  overflow: hidden;
59  perspective: 500px;
60}
61
62.hero__cover::after {
63  content: "";
64  position: absolute;
65  inset: 0;
66  background: radial-gradient(
67    circle,
68    rgba(0, 0, 0, 0) 20%,
69    rgba(0, 0, 0, 1) 90%
70  );
71  opacity: var(--overlay-opacity);
72  pointer-events: none;
73}
74
75.hero__cover-img {
76  width: 100%;
77  height: 100%;
78  object-fit: cover;
79  will-change: transform;
80}
81
82/* ---------------- STICKY TEXT ---------------- */
83
84.section-stick {
85  min-height: 100vh;
86  background: black;
87  display: flex;
88  justify-content: center;
89  align-items: center;
90}
91
92.opacity-reveal {
93  font-size: 4rem;
94  width: 60%;
95  text-align: center;
96}
97
98/* ---------------- HOBBITON ---------------- */
99
100.hobbiton {
101  position: relative;
102}
103
104.hobbiton::after {
105  content: "";
106  position: absolute;
107  inset: 0;
108  background: radial-gradient(
109    circle,
110    rgba(0, 0, 0, 0) 40%,
111    rgba(0, 0, 0, 0.7) 90%
112  );
113}
114
115.hobbiton-img {
116  width: 100%;
117  height: 100vh;
118  object-fit: cover;
119}

CSS Breakdown

Color System

CSS custom properties (--black, --white) provide consistent theming throughout.

Hero Section Layout

.hero-container and .hero establish full-viewport height sections.

overflow: hidden ensures content stays within bounds during transforms.

Background Image Parallax

.hero__bg uses will-change property to hint GPU acceleration for smooth animations.

filter: blur(3px) brightness(1.5) creates initial atmospheric effect.

The background will scale and adjust filters during scroll.

Hero Title Styling

clamp(3rem, 15vw, 12rem) ensures responsive typography across screen sizes.

Initial scale(0.5) and opacity: 0 set the starting animation state.

filter: blur(10px) creates initial blurred appearance that clarifies on scroll.

Cover Layer

--overlay-opacity: 1 is a CSS variable that GSAP will animate to 0.

perspective: 500px enables 3D transform effects on the image.

Radial gradient overlay creates depth and vignette effect.

Sticky Text Section

Flexbox centers large responsive text perfectly in viewport.

Will be pinned and animated with fade-out effect during scroll.

Final Image Section

object-fit: cover ensures image fills full height without distortion.

Radial gradient overlay darkens edges for visual cohesion.

Performance Optimization

will-change declarations prepare browser for animated properties.

Smooth scrolling is handled entirely by ScrollSmoother plugin.


⚙️ JavaScript Code


1gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
2
3/* Smooth scrolling */
4ScrollSmoother.create({
5  smooth: 1,
6  effects: true,
7  normalizeScroll: true
8});
9
10/* HERO TIMELINE */
11gsap
12  .timeline({
13    scrollTrigger: {
14      trigger: ".hero-container",
15      start: "top top",
16      end: "+=150%",
17      pin: true,
18      scrub: 1
19    }
20  })
21  .to(".hero__cover-img", {
22    scale: 2,
23    z: 350,
24    ease: "power1.inOut"
25  })
26  .to(
27    ".hero__cover",
28    {
29      "--overlay-opacity": 0
30    },
31    "<"
32  )
33  .to(
34    ".hero__bg",
35    {
36      scale: 1.1,
37      filter: "blur(0px) brightness(1)"
38    },
39    "<"
40  )
41  .to(
42    ".hero__title",
43    {
44      scale: 1,
45      opacity: 1,
46      filter: "blur(0px)"
47    },
48    "<"
49  );
50
51/* TEXT FADE */
52gsap.timeline({
53  scrollTrigger: {
54    trigger: ".section-stick",
55    start: "center center",
56    end: "+=1000",
57    pin: true,
58    scrub: true
59  }
60})
61.to(".opacity-reveal", {
62  opacity: 0,
63  scale: 1.2
64});

JavaScript Breakdown

Plugin Registration

gsap.registerPlugin(ScrollTrigger, ScrollSmoother) - Enables scroll-trigger functionality and smooth scrolling.

Smooth Scrolling Setup

ScrollSmoother.create() initializes smooth scrolling with three key options:

  • smooth: 1 - Duration in seconds for scroll smoothing effect
  • effects: true - Enables special scroll effects and parallax
  • normalizeScroll: true - Normalizes scroll behavior across different browsers

This creates the silky smooth scrolling experience throughout the page.

Hero Timeline Animation

Creates a GSAP timeline synchronized with scroll progress:

ScrollTrigger Configuration:

  • trigger: ".hero-container" - Animation starts when hero container enters viewport
  • start: "top top" - Begins when top of hero reaches top of viewport
  • end: "+=150%" - Ends after scrolling 150% of the viewport height
  • pin: true - Pins the hero section in place during animation
  • scrub: 1 - Syncs animation with scroll (1 second smoothing delay)

Staggered Animations (using "<" for simultaneous playback):

  1. .hero__cover-img:

    • scale: 2 - Zooms image to 2x size
    • z: 350 - Moves element forward in 3D space
    • ease: "power1.inOut" - Smooth acceleration/deceleration

  2. .hero__cover:

    • "--overlay-opacity": 0 - Animates CSS variable from 1 to 0, fading overlay

  3. .hero__bg:

    • scale: 1.1 - Subtle zoom on background
    • filter: "blur(0px) brightness(1)" - Removes blur and brightens background

  4. .hero__title:

    • scale: 1 - Grows from 0.5 to full size
    • opacity: 1 - Fades in from transparent
    • filter: "blur(0px)" - Removes blur for sharp appearance

Text Fade Timeline

Second animation controls the sticky text section:

ScrollTrigger Configuration:

  • trigger: ".section-stick" - Animation tied to text section
  • start: "center center" - Animation begins when section center reaches viewport center
  • end: "+=1000" - Continues for 1000px of additional scrolling
  • pin: true - Pins section in place while fading
  • scrub: true - Directly syncs animation to scroll speed

Animation:

  • .opacity-reveal:
    • opacity: 0 - Fades text from visible to invisible
    • scale: 1.2 - Simultaneously scales up for expanding effect

Result

The combined effect creates an immersive parallax experience where:

  • Smooth scrolling makes all interactions feel polished
  • Hero section pins and animates complex multi-layer transforms
  • Text fades and scales as users reach the sticky section
  • Multiple properties animate in perfect synchronization with scroll position

This architecture is ideal for premium portfolio sites, storytelling websites, and experiences that prioritize polish and user engagement.

Love this component?

Explore more components and build amazing UIs.

View All Components