Collapsing Logo Effect

Collapsing Logo Effect

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

Collapsing Logo Effect was written by Mary Lou and published on Codrops.

Continue reading @tympanus

Leave a Reply

Close Menu