Kinetic Typography Page Transition
source link: https://tympanus.net/codrops/2021/09/29/kinetic-typography-page-transition/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Kinetic Typography Page Transition
By Mary Lou in Playground on
September 29, 2021
From our sponsor: Front-end developers, save time and convert designs into clean React, Vue and HTML code using Anima
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK