How can I create a Left Navbar Sliding animation in Webflow that pushes the content to the right in Mobile view?
TL;DR
- Create a fixed Sidebar positioned off-screen and wrap page content in a Page Wrapper.
- Use Webflow Click Interactions to slide the Sidebar in from the left and shift the Page Wrapper right, and reverse both on close; show only on mobile view.
To create a Left Navbar Sliding animation that pushes content to the right in mobile view, use Webflow’s Interactions system and positioning tools.
1. Set Up Your Page Structure
- Navbar (Menu): Create a
div blockcalled Sidebar. Set its position to Fixed -> Left, width to (e.g.) 75%, height to 100%, Z-Index ≥ 100. - Content Wrapper: Wrap all your page content in a
div blockcalled Page Wrapper. This will be the element that shifts right when the menu appears. - Make sure the Sidebar is off-screen initially by setting its Left position to -100%.
2. Create the Open Menu Animation
- Go to Interactions > Element Trigger > Click on your Menu Button.
- Add a Click animation, name it something like Open Menu.
- For the first click:
- Affect Sidebar:
- Add a Move animation: Set
X: 0%(from -100%) withease-outtiming.
- Add a Move animation: Set
- Affect Page Wrapper:
- Add a Move animation: Set
X: 75%(or whatever width your sidebar has) withease-outtiming.
- Add a Move animation: Set
3. Create the Close Menu Animation
- For the second click of the same trigger:
- Affect Sidebar:
- Add a Move animation: Set
X: -100%.
- Add a Move animation: Set
- Affect Page Wrapper:
- Add a Move animation: Set
X: 0%(back to original position).
- Add a Move animation: Set
4. Ensure Mobile-Only Behavior
- Set the display for the Sidebar and Menu Button to show only on mobile (use Webflow’s viewport switcher and style display as needed).
- Optionally, disable the sidebar interaction on desktop by wrapping it in a visibility interaction or using conditional styling.
5. Optional: Add Overlay for UX
- Add a semi-transparent overlay div behind the Sidebar but above the Page Wrapper.
- Fade it in during the open interaction and out during close.
- Add click-to-close functionality by assigning the same close animation to the overlay’s click.
Summary
Build a fixed Sidebar off-screen and wrap your content in a Page Wrapper. Use Webflow Interactions to animate the Sidebar sliding in from the left while moving the Page Wrapper to the right. Trigger these animations using a Click interaction on a Menu button, and restrict them to mobile view for a responsive sliding experience.