How can I make a popup appear at a specific point during scrolling on my Webflow site if the 'show/hide' option is no longer available in the interactions panel?

TL;DR
  • Design and initially hide the popup element.
  • Add a scroll interaction to the page or trigger element.
  • Set scroll progress to trigger popup visibility.
  • Use animations to manage visibility and ensure smooth appearance.
  • Test and adjust the animation as needed.

Making a popup appear during scrolling can enhance user engagement on your Webflow site. Here’s how to achieve this without using the 'show/hide' option in the interactions panel:

​

1. Create Your Popup Element

  • Design your popup as a new element or section in your project.
  • Set the initial state to be hidden using the element’s display settings.

​

2. Add a Scroll-Based Interaction

  • Select your trigger element for the scroll interaction. This could be the page itself if you want to trigger the popup based on the page scroll.
  • Go to Interactions Panel and choose New Scroll Interaction.

  

3. Define the Scroll Progress

  • Choose the trigger event: either when scrolling into view or using the page while scrolling.
  • Set scroll progress/percentage where you’d like the popup to appear. Adjust this to match the specific point during scrolling you desire.

​

4. Manage the Popup’s Visibility

  • Within the interaction timeline, set actions to change the popup’s visibility.
  • Use animations such as fade-in by setting an opacity keyframe from 0% to 100%.
  • Control timing to ensure the popup appears smoothly at the specified scroll percentage.

​

5. Test and Adjust

  • Preview your site to ensure the interaction behaves as expected.
  • Adjust timing, easing, and percentages as needed to perfect the popup movement.

​

Summary

To display a popup during scrolling in Webflow: (1) Create and initially hide the popup element, (2) Add a scroll interaction, (3) Set the desired scroll progress for triggering visibility, and (4) Test and refine the animation. These steps allow you to create dynamic scroll-triggered interactions even without the traditional 'show/hide' options.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I fix the issue with my Webflow slider where the image is not displaying full-width and is showing part of the next image? Here is my site's Read-Only link: <br> ().
How can I create a row with 5 columns using Webflow?
Has anyone implemented code to automatically redirect visitors to country-specific websites in Webflow? For example, if a person located in Denmark visits the .no site, can they be redirected to the dk site?
Why is the <code>content-type</code> header not being updated in the HTTP request sent from Webflow Logic, despite the proper configuration?
How can I display the URL content using the EMBED in a container with the code set to Webflow? It currently only shows the link on the page.
Can I create two distinct event sub-sites within a single plan on Webflow with separate navigation menus, branding, and domain redirects? How should I approach planning for these differentiators?
What is the best way to use Google Maps with Webflow while preventing Google Webfonts from being loaded?
Has anyone successfully added a dynamic class name to each item within a Webflow collection list using custom JS? We want to vary the styling across the list items based on a field within the CMS. We're aware of the option to use multiple collection lists for different styling, but we're looking for more control. Any advice or examples would be appreciated. Thank you!
How can I prefill a form field with information from the URL in Webflow, specifically for unsubscribes using a passed email, so that the user only needs to click the submit button?
How can I enforce numeric input in form input fields in Webflow?
What are the third-party tools or integrations that work smoothly with Webflow for creating and linking advertising? Can someone provide a more detailed explanation on how to create and link advertising within Webflow and the process of exporting code for advertising purposes? Are there any updates in this area of Webflow to look forward to?
How can I remove unpublished changes in the Webflow editor that a client no longer wishes to publish?
Is it possible to enable auto play for a YouTube video in the new Webflow lightbox, even if passing on YouTube parameters through the URL doesn't work?
Has anyone found a solution to automatically update a user account access setting in Webflow based on manual verifications recorded in a Google Sheet? Thank you!
Is there a code in Webflow that can automatically redirect an idle page back to the Home page after a certain period of time?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?