Collapsing Logo Effect
Publikováno: 5.6.2018
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.
Collapsing Logo Effect was written by Mary Lou and published on Codrops.
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.
We hope you like this little effect and find it useful!
References and Credits
- Images from Unsplash.com
- anime.js by Julian Garnier
Collapsing Logo Effect was written by Mary Lou and published on Codrops.