Creating a Scaling Menu Animation in Webflow

John
August 18, 2022

Adding an animated menu to a website can make it feel more modern, robust, and engaging. It can add more design flare, and make the website stand out in the midst of thousands of static web pages with no interactivity. An animated menu can say “Hey, I know how to build a site, and I’m going to make this site stand out in a unique way.” It can also complement a specific design style.

In the above video I showcase how to create such a menu. If you’d like to clone the menu for free into your Webflow project click the following link: https://webflow.grsm.io/interaction?interaction=webdev-for-you-interaction-158.

You can follow along with the tutorial or simply copy and paste the menu into your own project.

The steps to create the menu are as follows (summary):

Step 1: Create the menu structure

  • Add a div block. Give it the name “menu-wrapper.” Set it to 650px in width and 500px in height. You can adjust this size to anything you’d like. Give this menu wrapper a position of relative and set the display setting to flex, horizontal, align center, and justify right.
  • Add a div block inside of the “menu-wrapper” and name it “menu.” Set the position to absolute and full to fill the parent “menu-wrapper” element. Give it any background color you’d like. Set the display setting to flex, horizontal, align center, and justify start.
  • Add a div block inside of the “menu-wrapper.” Name it “menu-trigger-wrapper.” Give it a width and height of 75px by 75px. Give it a display setting of flex, horizontal, align center, and justify center. Add a background div block with position of absolute and full. Give this div block the name “menu-trigger-bg.” Then add two menu lines inside of the “menu-trigger-wrapper” with a name of “menu-trigger-line.” The menu lines can be 75px in width by 2px in height. Give the menu lines 2px of margin to the top and bottom.
  • Add a div block inside of the “menu” div block and name it “links-wrapper.” Inside of this links wrapper add a link block and name it “link-block-wrapper.” Set the display setting to flex, horizontal, align stretch, and justify start. In this div block add a text block for the numbers and a text block for the name of each menu item. Style the text for the link block.
  • Adjust any margin and padding for the menu so that the menu has some white space and the spacing looks even.

Step 2: Create the Click interaction

  • Click on the “menu-trigger-wrapper” and add a click interaction. On first click scale the “menu” to 0 and set the opacity to 0%. Ensure that the “menu” element has a transform-origin set to the right and not center with the 2D & 3D transforms settings in the styles panel. Set these animations as initial states for the menu.
  • Move each “link-block-wrapper” down 10px on the y-axis and set the opacity to 0%. Set this as the initial state for each “link-block-wrapper.”
  • Afterward scale the “menu” back to 1 and set the opacity to 100%. For the “menu-trigger-lines” have the first line move down 3px and the second move up 3px. Then have the first line rotate 45 degrees and the second line rotate -45 degrees to create an X or close icon.
  • Next animate each “link-block-wrapper” back up to 0px on the y-axis and set the opacity back to 100%. Then stagger each of these animation by .1s so that each “link-block-wrapper” animation in a sequence. From .1s to .7s for each 7 menu items or however many you decide to add. The animations for these link blocks can be .2s with an easing of ease. You can also play around with the timing and easing for the other animations to get the desired feel for the animation.
  • On second click remove all the initial states and reset the scaling menu and the movement and rotation of the menu button. Then set the movement for each “link-block-wrapper” back to 10px and the opacity back to 0%. The duration on this reset for the link blocks can be 0 and the delay 0 as well as we will not see this animation after the menu closes.

Step 3: Create the Hover interaction

  • Select the “menu-trigger-wrapper” element and then create a hover interaction.
  • On hover in select the “menu-trigger-bg” and scale it to 1.1.
  • On hover out scale the “menu-trigger-bg” back to 1.
  • Duration can be around .2s and an easing of ease for both the hover in and hover out animation. You can adjust the timing and easing to your liking as well.

That’s it! You have now created a scaling animated menu in Webflow. This article provides a quick overview of how to build this menu. For more in-depth instructions please watch the video tutorial above.

To get started with Webflow click here: https://webflow.grsm.io/get-started

As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.

That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.

So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.

12 photography portfolio websites to showcase your work

Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.

1. Jasmine