Learn how to prototype web and mobile apps

How to wireframe slide-in elements on scroll

Adding a Slide-In on Scroll effect to your web wireframe design basically allows you to slide in elements from the outside of the page into the visual view port, as you scroll down. You can see an example here.

This tutorial will show you how to slide-in a dynamic panel either from the left or from the right when you reach a specific scrolling value.

The "Parallax elements" library includes a “Slide left layer” and a “Slide right layer”

Add a Slide layer to your web or mobile wireframe

To create a slide-in effect in your wireframe, drag a Slide left layer or a Slide right layer into your canvas. Once you place either layer (or both) on the canvas and simulate your web wireframe, the widgets will not show upon page load, but will slide in from left and/or right into the canvas when you start scrolling and the specific scrolling position value is reached.

Parallax widgets are ready for you to simply drag and drop onto your canvas. However, if you wish to edit the default widgets, check out the next section to understand how to setup this behavior.

Wireframing slide-in- widget

Tip: allow for enough page scrolling for the layers to slide in when simulating

The default events in the Slide layers

Each “slide layer” widget is a dynamic panel that includes the following two events by default.

on Page Load: this event applies to the “initial position” label, which will store the relative y-coordinate value of the dynamic panel so you can use it later to define scrolling conditions.

“on Scroll: this event is applied to the dynamic panel as a whole. For the dynamic panel to slide-in from a specific side of your web wireframe, we have defined an “on Scroll” event with a “Show” action that includes a “slide left/right” effect, where scrolling (“on Scroll”) triggers the “Show” action from either side.

Parallax panel effects - Slide In

While the above mentioned events make the slide layers show up, we must also set up the conditions to make them do so at the right moment.

The first part of the condition specifies that the panel should only show when the vertical scroll position (“Window Scroll Y”) is greater than the y coordinate value of the dynamic panel (“initial position”), which is the value previously stored by the “on Page Load” event mentioned above.

The second part of the condition specifies that when the dynamic panel is already showing, the slide-in effect will not be triggered again.

Parallax Conditions panel - Slide In

Parallax effects valor

You can tailor the Slide right/left layers to fit your needs, by editing the elements in the dynamic panels and the “Show” action effect in the event.
You can also edit the “initial position” scrolling value to any specific position by replacing the value box with a number.


Further prototyping with Parallax

This tutorial covers the “Slide right/left layer” parallax widget, which you can combine with other design elements to make unique web and mobile wireframes. Prototyping with parallax has a lot of other functionalities that can be combined to create incredible app or web wireframes:

– Create a fixed position menu in your web or mobile wireframe. Learn how!

– Pinned layer: pin a sticky element to a specific location in your web or mobile prototype, so it is always visible as you scroll downLearn how!

– Pinned panels: pinning panels to a specific position allows you to create fixed/sticky elements that stay in place and are always visible when scrollingLearn how!

– Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrollingLearn how!

– Scrolling speeds: use different scroll speeds for different elements, in order to provide additional effects to your Parallax scrolling. Learn how!

Parallax from scratch: create a parallax scrolling effect so that, upon simulation, the elements remain fixed in position on vertical scroll. Learn how!

Create a one page scroll: create a one page scroll, a single-scroll layout for a group of sections on a page. Learn how!