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.

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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.