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.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants