🔥 GSAP Text Scroll & Hover Clip Effect – Complete Explanation

This document explains the full HTML, CSS, and JavaScript setup for the scroll-animated gradient text combined with a hover-activated clipping reveal effect.

🟧 HTML Explanation

The HTML defines the full structure of the animation elements.

1. Fonts & Styles

Loads Poppins 900 from Google Fonts for bold, impactful headings.
Links an external style.css file for visual styling.

2. Container Layout

A .container div wraps all animated text elements.
Each line of text is created using an <h1> tag that contains:
- Main text
- A <span> element that appears on hover using clip-path
- Optional links inside spans for external references

3. Multiple Animated Text Blocks

Each line looks like:

1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>Text scroll and hover effect with GSAP and clip</title>
7    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
8
9  </head>
10    
11  <body>
12  <div class="container">
13  <h1 class="text">TEXT EFFECT<span>WOAH</span></h1>
14  <h1 class="text">GSAP<span>AND CLIPPING</span></h1>
15  <h1 class="text">CRAZYYY<span>CRAZYYY</span></h1>
16  <h1 class="text">HOVER ON ME<span><a href="https://stacksorted.com/text-effects/minh-pham" target="_blank">SOURCE</a></span></h1>
17  <h1 class="text">LIKE THIS?<span><a href="https://twitter.com/juxtopposed" target="_blank">LET'S CONNECT</a></span></h1>
18</div>
19    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js'></script>
20<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js'></script>
21<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollToPlugin.min.js'></script><script  src="./script.js"></script>
22
23  </body>
24  
25</html>

🟦 CSS Explanation

The CSS handles layout, typography, clipping effects, and hover states.

Page Setup

Dark background (#0D0D0D)

10% page margin for a centered modern layout

Poppins font for bold headings

Container Styling

Vertical column layout

200vh height to enable long scroll interaction

Left-aligned text elements

Text Block Styling

Every .text element is styled to achieve the animated effect:

Font size: 10vw for responsive typography

Color: Transparent gray using background-clip

Gradient Reveal:

Background is a horizontal linear gradient

background-size: 0% initially

On scroll, GSAP animates it to 100%

Layout:

Flex column layout

Border-bottom for separation

Positioned relative to hold the span overlay

Hover Span Clip Effect

The acts as the hidden layer:

Fully covers the text

Starts with a thin middle line using:

clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);

On hover, transforms into a full rectangle:

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

Uses a smooth cubic-bezier easing

Has a blue background (#4246ce) and dark text for contrast

Link Styling

Links inherit the text color

No underline

They animate as part of the span hover reveal

1body {
2  margin: 0;
3  padding: 0;
4  font-family: 'Poppins', sans-serif;
5  background-color: #0D0D0D;
6  margin: 10%;
7}
8
9.container {
10  display: flex;
11  flex-direction: column;
12  justify-content: center;
13  align-items: flex-start;
14  height: 200vh;
15}
16
17.text {
18  font-size: 10vw;
19  letter-spacing: -.01em;
20  line-height: 100%;
21  margin: 0;
22  
23  width: 100%;
24  color: rgb(182, 182, 182, 0.2);
25  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
26  -webkit-background-clip: text;
27  background-clip: text;
28  background-size: 0%;
29  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
30  
31
32  border-bottom: 1px solid #2F2B28;
33  
34  display: flex;
35  flex-direction: column;
36  align-items: flex-start;
37  justify-content: center;
38  position: relative;
39}
40
41span {
42  position: absolute;
43  width: 100%;
44  height: 100%;
45  background-color: #4246ce;
46  color: #0D0D0D;
47  
48  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
49  transform-origin: center;
50  transition: all cubic-bezier(.1,.5,.5,1) 0.4s;
51  
52  display: flex;
53  flex-direction: column;
54  justify-content: center;
55}
56
57.text:hover > span {
58  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
59}
60
61a {
62  text-decoration: none;
63  color: inherit;
64}

JavaScript Explanation

The JavaScript controls the scroll-based text gradient animation.

GSAP’s ScrollTrigger plugin is registered at the top.

Select All Text Elements const textElements = gsap.utils.toArray('.text');

This collects all .text

elements.

Loop Through Each Text Block

For each text line:

GSAP animates backgroundSize from 0% to 100%

ScrollTrigger ties the animation to scroll movement

ScrollTrigger Settings

trigger: text: the animation begins when each text block enters viewport

start: 'center 80%': animation starts early for smooth effect

end: 'center 20%': animation ends before the text leaves view

scrub: true: ties scroll position directly to animation progress

Final Result

As the user scrolls, each text block fills with gradient

Hovering reveals the clipped span layer

Smooth, modern, GSAP-powered scrolling animation

1gsap.registerPlugin(ScrollTrigger);
2
3const textElements = gsap.utils.toArray('.text');
4
5textElements.forEach(text => {
6  gsap.to(text, {
7    backgroundSize: '100%',
8    ease: 'none',
9    scrollTrigger: {
10      trigger: text,
11      start: 'center 80%',
12      end: 'center 20%',
13      scrub: true,
14    },
15  });
16});

GSAP Text Scroll & Hover Clip Effect – Full Code Explanation