Roll up menu like Richard Mille

[marcojacobs]

Hello all,

 

For a website i'm currently developing I want to create an animation for my menu. As an example I want to use www.ricahrdmille.com

 

The menu items make a "roll up" animation but I can't seem to find a way to do this.

Maybe somebody here can help me out?

 

Thanks in advance

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Definitely a fun site that one. I don't know if you noticed that IT IS USING GSAP.

 

This is fairly simple, I did something similar for the forums once, basically you need to rotate the black or hidden face of the menu by rotating it and hiding it's back face:

 

See the Pen Kvwyt?editors=011 by rhernando (@rhernando) on CodePen

 

Although I found the menu in that site quite cool so I took a stab at it and this is what came up:

 

See the Pen ?editors=011 by rhernando (@rhernando) on CodePen

 

It still needs some more work but I believe it would be enough to get you started.

[marcojacobs]

Wow Rodrigo, that's absolutely perfect!

 

Thank you very much, definitely going to use it on my website