From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
The initial view looks as follows:
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.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
We hope you like this little effect and find it useful!
References and Credits
- Images from Unsplash.com
- anime.js by Julian Garnier
Thank’s so mutch
Wow. This is outstanding. Collapsing logo effects would boost the aesthetic of my website. Kudos to you for creating this simple guide.
That’s pretty cool, but I think most customers will not understand it.