Can I copy this text reveal scroll effect with CSS-only?

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:45 - What we’re starting with
01:18 - Creating gradient text
03:48 - Creating the animation
05:54 - Realizing I need inline elements
07:44 - Fixing the animation timing
15:22 - Making the gradient match the original version

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

Turns out Chrome dropped the requirement to for the -webkit- prefix with v120, which is why this worked without it. If you're worried about browser support, you're probably best including both the prefixed and unprefixedd versions.

[darkbluebossa]

Love these "real world" examples, Kevin. It would be cool if we had videos like these from time to time. Happy New Year

[Shaheer-xsos]

Damn, you make the impossible possible Kevin. I can't even think of doing such things using pure CSS... JUST WOW 💕🦄

[Chevindu]

Regarding the magic number issue, my assumption is that the difference between the animation ranges is a variable of the height of the h2 element. Like, if h2's background starts and ends animation when the top edge of its css box passes the limit our vh values set, then there is technically a gap between when the h2 is done with its animation and when p starts its own. Just a wild guess.

[harikotha]

Thanks Kevin. I would love to see more of such videos. ❤

Happy new year 🎉

[skull]

Thanks for making videos like this one it really helps me learn new things.

[zygoloid]

I think the way to avoid magic numbers is to use cover for the start and contain for the end. That way, the first animation ends when the bottom of the h2 reaches the specified position and the second animation starts when the top of the p reaches that same position.

[zainmalik.]

Always love your video and everytime there is something new for me to learn

[thildamoon]

I first thought of making a gray overlay that scrolls away.
But this way is more to my liking.
Thanks.

[CommDao]

You always seem like you're just having a blast doing these!

[knickebein]

Thksss a lot!!!! ive been looking for this 10hr ago

[jordybaylac]

Dude you genius. I am full time backend developer but I can’t stop watching your videos 😂🙏

[antoncherry]

Quite an interesting format of video💪🏻👍🏻👍🏻👍🏻

[TheCârtiță]

wow, so many new interesting things for me to learn this new year!

[Julie-ghir]

Awesome ! I love that kind of video : I'm learning new stuff about css. I can do something pretty. AND I can see the way you are thinking to create css.

[berkozerdogan]

Kevin, I love your videos. I am learning a lot of good information thanks to you. God bless you :)

[RANKKY]

I feel like you could just use contain for the headline and cover for the text. That should mean it starts the animation for the headline once its fully visible and start the animation for the text, once it enters the viewport, which I suppose means, if their containers are touching, happens at the same time and therefore you could use the same numbers?

[ednh]

The simple fact that you're facing a real-world-css-problem and trying to deal with it in real-time is one of that things that better bond you to your audience. The "only" (realy? 😅) difference is that you find - and know - the solutions in a few minutes (maybe seconds) instead of days or weeks, like some of your audience (me included hahaha). Thank you for bring all your great content and skills as always!

[ROLNDFPV]

Love this, I think Bramus Van Damme is the one who can explain the range stuff the best ;)

[MariaRodriguez-bptl]

I enjoyed watching you work through this and listening to your thoughts 🙂 also the little "it worked!" because that's exactly how I feel when I figure things out 🤣