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.

The post Preview to Full Content Page Transition appeared first on Codrops.


This content originally appeared on Codrops and was authored by Mary Lou

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!

The post Preview to Full Content Page Transition appeared first on Codrops.


This content originally appeared on Codrops and was authored by Mary Lou


Print Share Comment Cite Upload Translate
APA
Mary Lou | Sciencx (2023-10-05T02:05:43+00:00) » Preview to Full Content Page Transition. Retrieved from https://www.scien.cx/2021/04/07/preview-to-full-content-page-transition/.
MLA
" » Preview to Full Content Page Transition." Mary Lou | Sciencx - Wednesday April 7, 2021, https://www.scien.cx/2021/04/07/preview-to-full-content-page-transition/
HARVARD
Mary Lou | Sciencx Wednesday April 7, 2021 » Preview to Full Content Page Transition., viewed 2023-10-05T02:05:43+00:00,<https://www.scien.cx/2021/04/07/preview-to-full-content-page-transition/>
VANCOUVER
Mary Lou | Sciencx - » Preview to Full Content Page Transition. [Internet]. [Accessed 2023-10-05T02:05:43+00:00]. Available from: https://www.scien.cx/2021/04/07/preview-to-full-content-page-transition/
CHICAGO
" » Preview to Full Content Page Transition." Mary Lou | Sciencx - Accessed 2023-10-05T02:05:43+00:00. https://www.scien.cx/2021/04/07/preview-to-full-content-page-transition/
IEEE
" » Preview to Full Content Page Transition." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2021/04/07/preview-to-full-content-page-transition/. [Accessed: 2023-10-05T02:05:43+00:00]
rf:citation
» Preview to Full Content Page Transition | Mary Lou | Sciencx | https://www.scien.cx/2021/04/07/preview-to-full-content-page-transition/ | 2023-10-05T02:05:43+00:00
https://github.com/addpipe/simple-recorderjs-demo