Free Webflow Functions

img

Chrome Extension

img
Back

Drawer

Dynamic Webflow Drawer with the best collection

Cloneable

Documentation

Documentation

Step 1

1. Copy the drawer <script> and paste into the <before closing body> of your page

                                <script src="https://flowgiri.com/js-library/drawer.min.js"></script>
                              

Step 2

1. Include a unique name as the value and assign the flowgiri-drawer attribute to the div block.

Name:

flowgiri-drawer

Value:

"[drawer-unique-name]"

2. Take a button inside the flowgiri-drawer div block and add flowgiri-drawer-close attribute to the button.

Name:

flowgiri-drawer-close

Value:

" "

3. The drawer opens by default from the topright position. To modify the direction of the modal, simply add the attribute flowgiri-drawer-direction to the flowgiri-drawer div and assign one of the following values to it: topleft, topright, top, or bottom.

Name:

flowgiri-drawer-direction

Value:

"topleft"

4. To open the drawer by clicked take a button and add flowgiri-drawer-open attribute to the element and give the drawer name as a value. When clicked on that element the drawer will open.

Name:

flowgiri-drawer-open

Value:

"[drawer-unique-name]"

Optional

1. To include an overlay, create a div block outside of the drawer div and assign the flowgiri-drawer-overlay attribute to it.

Name:

flowgiri-drawer-overlay

Value:

" "

2. To display a drawer automatically after the page loads, assign the flowgiri-drawer-type attribute to the flowgiri-drawer div block and set the value to auto.

Name:

flowgiri-drawer-type

Value:

"auto"

3. When you set an auto drawer, it will appear after 5 seconds by default. To adjust the duration of time include the drawer-autoplay attribute within the flowgiri-drawer div block and set the value to the desired number of seconds.

Name:

drawer-autoplay

Value:

"3"

Take idea from an example.

 <div flowgiri-drawer="left-sidebar"  flowgiri-drawer-direction="top"  flowgiri-drawer-type="auto"  drawer-autoplay="3" >
      your content
      <button flowgiri-drawer-close=" "  > close </button> 
  </div>
  <div flowgiri-drawer-overlay=" " ></div>
  <button flowgiri-drawer-open="left-sidebar" > open drawer </button>
  

Get the latest updates to your inbox.