On-Scroll Sliced Text Animation

A scroll-triggered sliced text animation, where segmented elements reunite while scrolling.

Today, I’d like to share a small text effect with you. It’s inspired by an effect visible on the Academy website, featuring a number that appears to be broken into segments or sliced up, pulled apart, and then brought back together. This effect seems to be an animation created with Lottie, utilizing clip-path animations on SVG paths.

I wanted to experiment and see if I could achieve a similar effect using plain HTML text without employing any clip paths. Instead, I used elements with their overflow set to hidden. While the result is not an exact match, it’s a playful typography effect that can introduce some interesting scroll action to a design.

Here’s a screenshot of how the effect looks, using a grid based layout where we repeat the text as many times as we have columns:

Now, we can play with translations:

…or creating a different look by pulling the cells wider apart:

Or, moving in from only one side:

It’s kind of hard to see this in static images so let’s have a look at it in motion:

All this reminds me a bit of glass and mirrors… There’s lots of possibilities here to make a ton of unique effects, especially when you start think of rows instead of columns, or indeed flipping segments to appear mirrored, i.e. using something like transform: scale(-1,1) 🤔

Hope you enjoy this and find it inspiring!

If you want to support my work and get bi-weekly frontend news plus inspiration right in your inbox, I’d love to invite you to subscribe to our newsletter, the Collective!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.