How to create a slide-in popup form in Framer (no code)

Watch on YouTube

Build a slide-in popup form in Framer without code. Follow the written steps or watch the video to create a form that appears as visitors scroll.

1. Create a popup form and set the positioning to fixed.
   
   

   1. Build or import a form, set the viewport height to 100vh with a width that works across all breakpoints.

   2. Set the positioning to fixed and position it to the left or right of the screen.

   
   

2. Turn the form into a component.
   
   

   1. Select the form and add a frame (CMD+Enter on Mac).

   2. Name the frame eg. Popup, and turn it into a component (OPT+CMD+K on Mac).

   3. Edit the component

   
   

3. Create a hidden/closed variant of the form.
   
   

   1. Delete unneeded existing variants of the form.

   2. Rename the Primary variant to “Open” and set the width and height to ‘Fit’.

   3. Create a new variant (CMD+D on Mac) and name it “Closed”.

   4. Select the close button of the Primary Variant, add a transition to the Closed variant with a click interaction.

   5. With the Closed variant selected, set the overflow to ‘Hidden’ if set to visible.

   6. Set the width and height to 1px and opacity to 0.

   7. Select the nested form, add the property ‘Pointer events = None‘.

   8. Optionally, set the nested form Visible property to ‘No’.

   9. Return to the page/canvas.

   
   

4. Add a slide-in scroll effect.
   
   

   1. Select the popup form component.

   2. Ensure the positioning remains fixed, set the width and height to ‘Fit Content’ and set a Z-index that is above 1.

   3. Under Effects, choose Scroll Animation.

   4. I will set the trigger to ‘Section in view’ and choose a desired section and viewport.

   5. Set replay to ‘No’, remove the Exit effect, and select ‘Enter Effect’.

   6. Enter Effect settings: Opacity = 0, X Offset = 400px (bigger or same width as form), Transition will be a Timed Spring with Time = 0.5 and Bounce = 0.1.

   7. Preview the result and close the popup.

Conclusion

This is one way to create a popup form without code, using Framer’s built-in scroll effects. Test it across devices and check accessibility before publishing.

Watch the video for a visual guide.

Preview the project here

Remix the project here

Try Framer for free

Hire a Framer Expert

Thanks for visiting Design Chillout! Explore the designer toolkit or grab something from the cooler box!

Affiliate Disclaimer:
This page contains affiliate links. Site content is supported by awesome visitors like you who buy after clicking on a link, at no extra cost to you.

AI disclaimer:
This article contains original content. However, AI may have been used to generate content from existing sources, or to correct the grammar, spelling, and formatting.