I love text scrolling effects. Let me show you how to create one on your website, so let's learn how to fill text on scroll when it enters the screen using GSAP and ScrollTrigger.

Note: Make sure there's a lot of space to scroll to! I added 220vh to the minimum height on my CodePen demo below.

Check out this interactive CodePen demo

1. Add JavaScript code

Paste this code on your page, or at the bottom of your site.

We use GSAP to animate the background size from 0% to 100% only when the heading scrolls into the viewport from the bottom with the help of ScrollTrigger, and it will reach full width when it reaches 50% of the screen.

We use the scrub parameter so it animates only while scrolling.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
	gsap.set(".text-fill", {
		backgroundSize: "0%",
	const textElements = gsap.utils.toArray(".text-fill");

	textElements.forEach((text) => {
			{ backgroundSize: "0%" },
				backgroundSize: "100%",
				ease: "none",
				scrollTrigger: {
					trigger: text,
					start: "center 100%",
					end: "center 50%",
					scrub: true,

Optional: Make sure you have the latest GSAP version

From the GSAP installation page grab the latest version.

  1. Choose the tab CDN
  2. Check ScrollTrigger
  3. Copy the code

Add this code to the <head> of your site's body.

GSAP CDN with ScrollTrigger checked
GSAP CDN with ScrollTrigger checked

2a. Styling for Webflow

Add class name: text-fill

Add text-stroke.

Make text color transparent.

Add a background color.

Add the following code to have no-repeat for the background.

	.text-fill {
		background-repeat: no-repeat;
		transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1)

This code also adds custom easing.

Clip background color to the text.

2b. Styling for Elementor

  1. Add class text-fill to your heading(s).
  2. Add this CSS code to your page.
  3. Add your own colors to the CSS code with the varables.

Note: you may have to add !important to avoid overrides by Elementor (i.e. background-size: 0% !important).

	:root {
		--text-color: rgba(255, 255, 255, 0.5);
		--text-stroke-color: #fafafa;
		--text-fill-color: #fafafa;
	.text-fill {
		background-image: linear-gradient(
			to right,
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		background-size: 0%;
		color: var(--text-color);
		transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1)
		-webkit-text-stroke: 2px var(--text-stroke-color);
		text-stroke: 2px var(--text-stroke-color);

Test it out!

And there you go, text fill animation on scroll.

Let me know if you plan to use this on a future website as well.

By the way, this code was inspired by this CodePen by Juxtopposed:

Unlock exclusive web design tips and tricks! Join our mailing list for a monthly dose of inspiration delivered straight to your inbox.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
I will never send you spam. Unsubscribe at any time.

More videos


No next video
Back to all videos


No previous video
Back to all videos

Some of the links on this page are affiliate links, meaning I may receive a commission if you follow them. This allows me to continue providing free content and educational resources for you, and for you it changes nothing. Also, I 100% stand behind every product I recommend. Thank you for supporting my small business