Preview to Full Content Page Transition

An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.

From our sponsor: Try Mailchimp today.

Today I’d like to share a small transition effect with you. It’s an animation for a preview item that becomes the full page with an article. This kind of animation concept is really interesting for blog/magazine layouts. It’s a bit tricky because of the page being scrollable, but managing it with some overflow properties makes it work.

The preview item consists of an image and a special rounded button that has a magnetic hover effect that makes the text transition.

Once clicked, the content appears and the circle moves up, where the main title animates in.

And this is how it all comes together:

I really hope you enjoy this and find it useful!

Thank you for checking by!

Tagged with:

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