Kinetic Typography Page Transition

A concept for a kinetic typography based page transition where background letters come into the foreground and reveal a new content level.

The other day I was drooling over HOLOGRAPHIK’s amazing kinetic typography animations. Especially this one caught my eye. There’s a very interesting (very short) part where some words are being rotated and zoomed in, and I couldn’t help but think of a page transitions that somehow incorporates that idea.

So I went ahead and tried it on a simple layout to see how it could work. Turns out it’s a lot of fun and there’s so many possibilities for making this look and feel right for a specific design.

The initial screen has some items:

Once we click on an item, the typography page transition happens. The faded background letters starts to rotate and become more visible and finally, they move out, revealing the next screen:

Here’s the whole animation (the color is actually a bit off in the video):

I really hope you enjoy this one and find it inspirational! Let me know what you think on Twitter @codrops or @crnacura! 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.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!