THEMETRIAL

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

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!


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.