Overview
I am using Webflow’s Slider component to implement a 2-step form - Slide 1 contains Part 1 of the form, and Slide 2 contains Part 2 of the form.
The intended flow is:
- The user fills out Part 1 of the form (i.e. everything on
Slide 1), scrolling down as needed to reveal form fields - The user clicks the “next” button on
Slide 1, taking them toSlide 2 - The user fills out Part 2 of the form (i.e. everything on
Slide 2) - The user clicks the “submit” button on
Slide 2, completing and submitting the form successfully
Currently, for the transition between Slide 1 and Slide 2 (step 2 above), when the “next” button is clicked, the Slider navigates from Slide 1 to Slide 2 as expected, but retains the level of scrolling that was performed while filling out Part 1 of the form (step 1 above). What this means is that instead of the Slide 1 → Slide 2 transition taking the user to the top of Part 2 of the form, the transition just goes to Slide 2 and stays at the same place the user had scrolled to in Part 1, causing the user to need to scroll up manually in order to view the beginning of Part 2 of the form.
I am looking for a way to automatically have Slide 2 start at the very top after the transition from Slide 1 → Slide 2.
What I Have Tried
I tried to add an animation on Slide 2 that is triggered when Slide 2 comes into view. The animation moves Slide 2 up by 250px. This fix doesn’t work for me because 250px is being used as an approximation of how much the user would have had to scroll down in Slide 1 when filling out Part 1 of the form, instead of being a dynamic configuration to start at the top regardless of how much the user scrolled down in Slide 1. I tried replacing the 250px with other quantities and units, but those are all static values and hence don’t work for the same reason.
I am thinking I may need some sort of animation / transition that sets the y property of Slide 2 instead of a “move by xyz units” property.
Here is my public share link: LINK