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.
PreviewContentTransition_featured

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.