🥳 Enjoy 3 months of Framer for free!
#1 - Create the menu
First, create a title and a button, and make sure to pack them in a stack. Then, wrap this Swag title and button in another stack, carefully adjusting the padding (4,4,4,24). Finally, create another stack which will become the component layer to complete this step.
#2 - Setting up your component
After creating a component, set its width and height to fixed dimensions of 201 x 61. Then, select the Top menu layer and use absolute positioning with top: 12 and left: 12.
#3 - Create the navigaiton
It's time to create the navigation. I'm now changing the width and height again to 290 x 539 and pasting the menu structure onto the canvas (I've created this beforehand). The top menu will disappear, so select your top-menu layer and set its Z-index to 2 to make it appear.
#4 - Duplication and button component
We're making progress! Let's duplicate your variant three more times. This will be necessary for the animation to work as intended, separating the top menu animation from the navigation.
Finally, let's create a button component and add a white variant.
#5 -Changing your button variants
Change the button variant 2/3/4 to the white button style and replace the text 'menu' with 'close'.
#6 -Creating the different menu variants
Invert the colors of the top menu on variant 2/3. Select all nav-item text in your first variant and set opacity to 0. Select the third variant and bring the opacity back to 100. Done? Select title + menu and set width to 230, and set distribution to 'space between'.
#7 -Hiding the navigation
On the first variant, select the "large-menu" layer and set its height to 10px and width to 160px. Fix the top to 26 and left to 32. On the third variant, revert changes so that the dimensions of the navigation should be: width of 290px and height of 539px.
#8 -Fixing your sizes and adding interactions
Select the first variant and set width: 201 and height: 61. Select the 2nd layer and set its width: 290. Set the 3rd and 4th variants to 290 and 539 respectively. Now add the interactions. Follow the video to see my setup. Make sure the 2nd and 4th are set to appear and 0.3.
#9 -Fixing your transitions
For a seamless interaction, adjust the transition's variables starting with your initial variant and then proceeding to variants 2, 3, and 4. This ensures that you won't inadvertently create issues further down the line.
#10 -Funky hover states
You're almost done! Just one final step: select your button component, add a large white oval shape, and set it to position absolute below the screen. On the hover variant, move the white oval to the center to create the desired hover effect.
#11 -Nice job!
If you followed all of these steps, you're done! Your finished product should look like this.
👋 I hope you've enjoyed today's drop.