From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/04/Preview01.jpg?x86293)
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.
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/04/Preview02-800x500.jpg?x86293)
And this is how it all comes together:
I really hope you enjoy this and find it useful!
Thank you for checking by!