Hey Maurice, glad you like it!
I did all the interactions within webflow and no external js
To be honest it was quite challenging to get the effect right due to what is possible without me knowing js
- The way that i did it was to start with a full takeover container on load with z index above all other elements
Then when assets have loaded set an interaction for the container to change from 100% to 300px with nice easing
so that the shape morphs into the size of my side bar - then fade out to reveal my side bar underneath and display none shortly after so all links on my side bar aren’t getting blocked - then it is just a matter of getting all the timings right - so that my stagger animations on the side bar happen after the wipe has finished
Quite a process to get right but the effect is worth it!
If anyone else has another way feel free to chime in
For me webflow is quite capable but you have to think outside the box
As for the logo I have created an animated gif and then set an interaction to create a bit more delay and then fade out on load - transition the same effect ( size change in interactions from 100% to 300px) - again trying to get the timing spot on
Hope this makes sense and helps!