Distributed Letters Animation Layout

A distributed letters animation in the context of a triple panel layout with hover effect.

By Manoela Ilic in Playground on
Demo Code

A while back I stumbled upon this great Dribbble shot by Seth Eckert. I love that letter effect and so I was thinking about a layout where I could incorporate this kind of animation.

After playing around a bit, I thought that a layout that allows for opening a panel would be interesting. So here it is; a little layout with a distributed letter animation on hover. When clicking, the letters will move to their respective place in the panel and the other elements will animate in.

I really hope you like this and that it comes in handy.

Thank you for checking by!

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.

grid hover page-transition typography

Drawing Graphics with the CSS Paint API

Coding the Sliced Image Hover Effect from Quai Network

Shape Lens Blur Effect with SDFs and WebGL

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.