Learn how to prototype web and mobile apps

How to use fade-in elements in your interactive wireframe

In this tutorial, we’ll take a look at Justinmind’s Fade in layer widget, one of the several Parallax elements for defining rich events in your interactive wireframe.

Fade In Layer parallax widget library

The purpose of this element is simple, i.e. providing an initially invisible dynamic panel that shows up with a transition effect when a defined point has been reached by scrolling. You can see an example here.

Add a Fade in layer to your web or mobile wireframe

We’ll start by dragging a Fade in layer to the canvas. Once placed, the sticky element will be ready to be used. It is a dynamic panel, so you can edit its content as you like.

To see your Pinned layer work during the simulation, add at least another element, and place it at the bottom of the canvas so as to allow for enough scrolling. You can now click on ‘Simulate’ and scroll to the appropriate position to see the Fade in layer working in your interactive wireframe.

Tip: Use the Navigator panel on the left of your canvas to visualize the entire page you’re working on. And remember you can let it float and resize it.

Fade-in layer’s default events

To understand how the fade-in layer works, let’s investigate its predefined events.
As specified by the two red hidden symbols on the top left corner of the dynamic panel, both the initial position label and the dynamic panel are not shown on page load.

While the label will hold the initial y-coordinate position of the dynamic panel and never be visible, the dynamic panel will switch between shown and hidden.

This is done through an ‘On Scroll’ + ‘Show’ event, which depends on a condition.

fade in layer event example

The initial y-coordinate value is used to define the ‘Show’ action: when the horizontal scroll position is greater than the initial value, the layer will be displayed with a linear easing effect to slowly fade it in. If at any point the horizontal scroll point is above the fade in layer, the hide action will be triggered.

The widget offers flexibility in implementation: the point of appearance and the show effect can be customized.

To do so, simply readjust the position of the dynamic panel, and specify the desired easing and linear effects within the show/hide action dialog.

Fade In Layer - create event

Further prototyping with Parallax

This tutorial covers the “Fade in” 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!

– Slide-in layers: slide in elements from the outside of the page into the visual viewport as you scroll downLearn 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!

– 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!