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:
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%
Control Popup Frequency
Copy this attribute:
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
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.
Create Popup Close Button
Copy this attribute:
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.
Select Custom Focusible element
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Input (Text Field) of a Webflow Form.
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:
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.
Delete the combo class and update the Transform Y to -32 px and Transitions to 500ms.
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
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript