How to add a Webflow Popup that triggers on scroll back up
Display a popup when you scroll up the page
Install the VisualDX Script
Firstly, make sure you have the VisualDX script before your </body>
Create Scroll Up Popup Element
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Custom Element. In the Value field add the same unique identifier as the popup button.
Add Value to Scroll Up Attribute
Control the page scroll percentage by adding a value to the Scroll Up attribute.
Default scroll down percentage is set to 0%
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.
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 the same unique identifier as the popup button.
Control the popup frequency by adding a value to the vdx-popup-frequency attribute.
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
Control the display animation with Webflow Transitions
Example of a scroll up popup
Scroll back up the page
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
Sponsor the Magic and
Buy Me a Beer
VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.
Think of it like buying me a pint for keeping your Webflow spells flowing.
You can support it here.
Cheers, legend!
This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.