Collapsing Logo Effect

A recreation of the collapsing logo effect seen on PracticalVR. The idea is to have an initial view that animates to a logo in the top left corner of the page.

From our sponsor: Sign up for Mailchimp today.

Today we’d like to share a little collapsing logo effect with you. The idea is to have an initial view that scales down to a logo in the top left corner of the page. The logo can then be clicked again to expand it to the initial view. The effect is a recreation of the one seen on PracticalVR.

For the animations in this demo we use anime.js.

Attention: Note that we use modern CSS properties like grid and variables in this demo.

The initial view looks as follows:

CollapsingLogoEffect_01

When clicking on “enter”, the background of the initial view scales first on the X axis and then on the Y axis, resulting in its new position in the top left corner of the page.

CollapsingLogoEffect_02

The way that this is achieved is by setting the intro__box transform to a scale value that will make it stretch all over the page. So basically, its initial state is a transformed one. Then we just need to set the X and Y value to 1. On resize we need to make sure to recalculate the initial scale values.

CollapsingLogoEffect

We hope you like this little effect and find it useful!

References and Credits

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.

Feedback 3

Comments are closed.
  1. Wow. This is outstanding. Collapsing logo effects would boost the aesthetic of my website. Kudos to you for creating this simple guide.

  2. That’s pretty cool, but I think most customers will not understand it.