2.3 C
New York
Sunday, January 14, 2024

On-Scroll Sliced Textual content Animation | Codrops

Right this moment, I’d prefer to share a small textual content impact with you. It’s impressed by an impact seen on the Academy web site, that includes a quantity that seems to be damaged into segments or sliced up, pulled aside, after which introduced again collectively. This impact appears to be an animation created with Lottie, using clip-path animations on SVG paths.

I needed to experiment and see if I might obtain an identical impact utilizing plain HTML textual content with out using any clip paths. As an alternative, I used components with their overflow set to hidden. Whereas the consequence shouldn’t be an actual match, it’s a playful typography impact that may introduce some fascinating scroll motion to a design.

Right here’s a screenshot of how the impact appears, utilizing a grid primarily based format the place we repeat the textual content as many instances as we’ve columns:

Now, we are able to play with translations:

…or creating a distinct look by pulling the cells wider aside:

Or, shifting in from just one aspect:

It’s form of exhausting to see this in static photos so let’s take a look at it in movement:

All this jogs my memory a little bit of glass and mirrors… There’s numerous prospects right here to make a ton of distinctive results, particularly whenever you begin consider rows as an alternative of columns, or certainly flipping segments to look mirrored, i.e. utilizing one thing like rework: scale(-1,1) 🤔

Hope you take pleasure in this and discover it inspiring!

If you wish to help my work and get bi-weekly frontend information plus inspiration proper in your inbox, I’d love to ask you to subscribe to our publication, the Collective!

Supply hyperlink

Related Articles


Please enter your comment!
Please enter your name here

Latest Articles