Streaming live at 10am (PST)

Full page nav issue


#1

Hey guys,
Just not sure what I should call this effect but I am trying to achieve the same menu animation on this website: https://stupid-studio.com

Also any info on how to achieve something like the slider would be really good also.

Thanks in advance and here is the live preview of the current process:

https://preview.webflow.com/preview/pidu?preview=9120698d90aa225680a0fb63b1d4eccf


#2

Hi @efe5072,

What exactly part of animation you want to replicate?

About slider animation: it is possible with "Slider" triggered interactions


#3

Sorry for not being clear,
Not really a animation but when you click the menu button the menu div looks like it is rotated 45degrees and it fill the whole page.
However when I try to rotate a div with %100 height/width it doesnt fill the whole page and it centers itself.
Same thing also for the slider thing, there is a div looks like rotated/cutted. Thats exactly what Im trying to achieve


#4

Anyone willing to help ?


#5

Try to add another div inside the "menu" and make it bigger than 100% width and height. Then turn it by using Transforms and move it, using absolute aligning so it would feel all "menu". Sure do not forget to make menu averflow: hidden and change its interaction to display:block - display: none (instead of sliding up and down).

Then use one more trigger in hamburfer menu interaction which will move this new div into the correct position and hide again. It is not always easy but, after couple minutes of experiment you can find correct position.

Here is a video, I tried to play with tthe menu and colorblock on your site. Hope it will be useful: https://youtu.be/dp7scch2RFY

Regards,
Anna


#6

Damn sabanna !!
Thank you very much for this video, I really appreciate it !
Looks like I need to mess with it for a time and follow your video.
Thank you very much again for your help, will share the final result when its done :blush:


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.