00:00
Buy Me a Beer
Components

Popup - Scroll Down

Display a popup when you scroll down

How to create a scroll down popup in webflow

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Create Scroll Down Popup Element

Copy this attribute:

vdx-popup-scrolldown

Paste the attribute into the Custom Attributes Name field of a Webflow Custom Element. Control the page scroll percentage by adding a value  to the attribute.

eg a value of "30%" will trigger the popup when the user scroll down 30% of the page.

default value is set to 50%

Body
Custom Element
Button
Form Block
Form
Input
Custom Element
Style
Settings
Interactions
Div Settings
Tag
Div
Custom Attributes
Name
vdx-popup-scrolldown
Value
30%

Control Popup Frequency

Copy this attribute:

vdx-popup-frequency

Paste the attribute into the Custom Attributes Name field of a Webflow Custom Element. In the Value field add a number that represents the number of hours between each popup being triggered.

vdx-popup-frequency="12" = Display once every 12 hours

vdx-popup-frequency="24" = Display once every 24 hours

vdx-popup-frequency="672" = Display once every 28 days

Default popup frequency is set to 0 hours

Body
Custom Element
Button
Form Block
Form
Input
Custom Element
Style
Settings
Interactions
Div Settings
Tag
Div
Custom Attributes
Name
vdx-popup-scrolldown
Value
Name
vdx-popup-frequency
Value
12

Convert Custom Element to Dialog

In the settings if a Custom Element change the Tag from a Div to a Dialog. This will set the popup to Display: none.

Body
Dialog
Button
Form Block
Form
Input
Dialog
Style
Settings
Interactions
Dialog Settings
Tag
dialog
Custom Attributes
Name
vdx-popup-scrolldown
Value

Create Popup Close Button

Copy this attribute:

vdx-popup-close

Paste the attribute into the Custom Attributes Name field of a Webflow Buttonwhich is a child of the Popup. Note: we do not need a value here.

Body
Custom Element
Button
Form Block
Form
Input
Button
Style
Settings
Interactions
Link Settings
Custom Attributes
Name
vdx-popup-close
Value

Select Custom Focusible element

Copy this attribute:

vdx-popup-focus

Paste the attribute into the Custom Attributes Name field of a Webflow Input (Text Field) of a Webflow Form.

Body
Dialog
Button
Form Block
Form
Text Field
Text Field
Style
Settings
Interactions
Text Field Settings
Custom Attributes
Name
vdx-popup-focus
Value

Add animations to popup child elements

In this example the From Block will move from a starting position of 32px below to it's original position in 1000ms with an easing of Ease.

Copy this Combo Class:

vdx--open

Paste the combo class into a style selector of Form Block .

Style your  the combo classes. eg. Set the Transforms to 0px and give the width transition a time of 1000ms and easing of Ease.

Body
Button
Dialog
Button
Form Block
Form
Text Field
Form Block
Style
Settings
Interactions
Style Selector
Form Block
vdx--open
2D & 3D Transforms
Move: 0px, 0px, 0px
Transitions
Transform: 1000ms
Easing
ease

Delete the combo class and update the Transform Y to -32 px and Transitions to 500ms.

Body
Button
Dialog
Button
Form Block
Form
Text Field
Form Block
Style
Settings
Interactions
Style Selector
Form Block
2D & 3D Transforms
Move: 0px, -32px, 0px
Transitions
Transform: 500ms
Easing
ease

Publish

Example of a scroll down popup

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript