Framer tutorial: Create a slide-in popup form (no code)

Watch on YouTube

In this tutorial, I will demonstrate how to create a pop-up form that slides into view on scroll in Framer. No coding is required. Follow the steps below or watch the video for a visual guide.

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

There are a multitude of options to add a Popup form to a Framer site; however, this method is a no-code solution using Framer's native scroll effects. Do note that thorough testing, including for accessibility, is recommended.

Watch the video for a visual guide.

Preview the project here

Remix the project here

Try Framer for free

Hire a Framer Expert

Affiliate disclosure:

As a Framer Partner, I may earn from qualifying plan purchases at no cost to you.

AI disclaimer:

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