To make a popup appear at a specific point during scrolling on your Webflow site, you can use custom code and the native Webflow interactions. Although the 'show/hide' option is no longer available in the interactions panel, you can achieve the desired effect by following these steps:
Step 1: Create the popup
First, you need to design the popup you want to appear. You can use a div block or a modal window for this purpose. Style and position it accordingly.
Step 2: Set initial visibility and position
In the Style panel, set the initial visibility of the popup to "Hidden" so that it's not visible when the page loads. You can do this by selecting the popup element and setting the initial state to "Display: None" or using the Opacity effect in the interactions panel.
Step 3: Add a trigger element
Choose an element on your page that will act as the trigger to make the popup appear. This could be a button, link, or any other element. Make sure to give this element a unique class or ID.
Step 4: Add an interaction
Add an interaction to the trigger element. You can do this by selecting the element, navigating to the Interactions panel, and clicking the "+" button to create a new interaction.
Step 5: Define the steps in the interaction
In the interaction settings, select the "Scroll" trigger type. Set the scroll point where you want the popup to appear.
Step 6: Add custom code to show the popup
Next, switch to the "Custom Code" tab in the interaction settings. Here, you'll need to add some JavaScript code to show the hidden popup when the trigger point is reached.
For example, using jQuery, you can add the following code:
```javascript
```
Replace '.your-popup-class' with the class or ID of your popup element, and 'triggerPoint' with the pixel value at which you want the popup to appear.
Step 7: Preview and refine
Preview your site to see how the popup appears at the specified point during scrolling. Adjust the triggering point and animation as needed until you achieve the desired effect.
By following these steps, you can create a popup that appears at a specific point during scrolling on your Webflow site, even without the 'show/hide' option in the interactions panel.