pata pata pata

Hot Summer Deal

40% OFF

0

Days

0

Hours

0

Minutes

0

Seconds

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>
  

Pricing

Join now to Save Money & Time On Webflow Design Assets

Starter

Monthly Plan

$49

$29

Save 40%

Best for short time projects


Access to all update features

star-icon
img

User

Single user licence & 1 Device Login

img

Premium Templates

Use 1500+ Premium Webflow Templates

img

Copy & Paste

Copy any design and paste into Webflow

img

Personal & Commercial

Use resources for your & client projects

img

Flowgiri Chrome Extension

Access all resources from Webflow & Browser

img

Support

1 Month Support

Professional

Annual Plan

$159

$97

Save 40%

Best for professionals


Access to all update features

star-icon
img

User

1 user licence & 1 Device Login

img

Premium Templates

Use 1500+ Premium Webflow Templates

img

Copy & Paste

Copy any design and paste into Webflow

img

Personal & Commercial

Use resources for your & client projects

img

Flowgiri Chrome Extension

Access all resources from Webflow & Browser

img

Support

1 Year Support

Agency

Annual Plan

$299

$179

Save 40%

Best for agency


Access to all update features

star-icon
img

User

5 user licence & 5 Device Login

img

Premium Templates

Use 1500+ Premium Webflow Templates

img

Copy & Paste

Copy any design and paste into Webflow

img

Personal & Commercial

Use resources for your & client projects

img

Flowgiri Chrome Extension

Access all resources from Webflow & Browser

img

Support

1 Year Support

Get the latest updates to your inbox.