Animations & Interactions: Deliver Mobile Content With Fade-Ins

Imagine loading only the web content that users need on a smartphone. It’s not the future: mobile-savvy designers are making content appear depending on scroll. The ability to make elements load as users follow page is important in mobile design for two reasons, which we described in the free e-book Web Design Trends 2015 & 2016:

It adds a dash of surprise and delight as elements animate in real time.
It only loads resources as users need them, potentially saving bandwidth.

Explaining this to stakeholders in a project requires more than lo-fi sketches. Luckily, with a little planning and a lot of common sense, you can make a prototype that only shows elements as users need to see them. Follow along with your free UXPin account or check out the demo at the end of this post.

1. Design the Elements

This technique is best viewed on long, mobile websites — but works just as well with long single-pagers on most any screen. In this case we’re creating a marketing site’s landing page with information about their services.

2. Set Up

The first image and subhead are high enough to appear on first load, so they should load automatically. We’ll ignore it in this tutorial. The second teaser, however, is likely to only appear as users scroll down, so we’ll set it to act on scroll.

To start, we need to know exactly where the teaser is. Tap the element and you’ll see its options menu. Tap the “i” icon and you’ll see its coordinates — in this case 44 × 500 pixels. That 500 is important for reasons you’ll see in a moment.

3. Create a Scroll-to-Action

Next we give the element an action that occurs when the user scrolls. Best-practice UX will make the element appear as the user approaches it so they don’t scroll right past it. That’s why you need its Y value. We recommend making the element appear between 250 and 300 pixels above its actual position. Here are the specifics for this demo:

Trigger: “Window is scrolled to”
Scrolled to: 200px (500 – 300)
Action on this element: “Show”

4. Make the Element Disappear

Of course, all this is for nothing if the teaser is always visible. Tap the “i” icon again, then tap the visibility icon in the upper right corner to make the element disappear.

And that’s it. Preview the prototype to see it in action or check out the demo we set up for you to try. You can also take what you’ve learned and use it with a free account to UXPin.