The Sneaky Technique Mobile Apps Use to Make Transitions Appear Smoother Than They Really Are

Good mobile apps are known for smoothly sliding and gliding around at the swipe of a finger tip, but sometimes a little behind-the-scenes magic is needed to ensure a smooth experience when new app pages load.

Our tiny little smartphones (OK, they’re actually getting bigger again, but that’s beside the point!) are entrusted with some seriously resource-intensive operations these days.

While device hardware is always racing forward at breakneck speeds, app concepts constantly push the boundaries of mobile devices by improving graphics & animations, utilizing device features — camera, GPS, gyroscope, etc. — in innovative ways, and entrusting the management & parsing of huge datasets as many businesses and government agencies move to mobile first.

While we think of apps as distinctly different from their website counterparts, apps are still conceived as a series of pages, sometimes also called “views,” that the user navigates between as they use the app.

Moving between pages intrinsically also means loading pages, and even on modern devices, some data-heavy pages could introduce a laggy, unattractive hiccup in use experience as they loaded in…

but they don’t.

How do they do it?

Many well-constructed modern apps have a clever way of making page loads appear seamless. When a button is tapped or a screen swiped aside, the expectation is that the new view simply slides or pops in over the one the user was just on, but here’s what really happens:

1. A screenshot is taken:

As soon as an action is taken that initiates a new page load, the app takes a screenshot of the page the user is currently on, and brings it to the “top” layer of the app. At this point, from a user’s perspective, nothing has happened.

2. The new page loads under the screenshot:

Once the screenshot is on top of the app’s visible viewing area, the new page loads in underneath it.

3. A transition is executed between the sceenshot and the new page.

Finally, the programmed transition (be it a fade-in, slide across, etc.) is executed between the screenshot and the newly loaded page.

To the user, it’s silky smooth.

This entire process occurs in mere milliseconds, but it buys enough time for pages to fully load without interrupting or lagging the user experience.

When developing for new devices that need to do more with less (i.e. moving from full desktop or laptop hardware to a phone), programmers have a long history of being innovative, and this transitioning technique is not unlike the app/web practice of reusing in a long, scrollable list as they scroll off the page in order to cutdown on the number of cells needing to be loaded at any given time.

Pretty neat, right?

Aquro is a cross-platform development environment for rapidly developing iOS and Android apps at the same time. Learn more at http://aquro.com