IF by IFTTT

This app’s onboarding sequence received a lot of attention when they launched it. Mainly because the scrolling between pages drives other animations, like the parallax effect with the icons on the first page.

Many developers at the time, including me, asked: “But how did they do it?”

Apparently, the team at IFTTT had created (and open-sourced) a custom animation framework for app intros.

We don’t any need any special framework though, only Framer.

(FYI: Since the introduction of Applets the app now has a different intro.)

Earlier versions of this tutorial had many sentences like: “…now import the next image and position it at x here and y there…”. The prototype was also big, almost 900 lines of code.

But now, thanks to Framer Design, we can start with the images already imported, and concentrate on just adding the interactions.

Download Framer project

Below are the steps we’ll take. The optional steps at the end make it possible to switch to the ‘Sign in’ and ‘Reset password’ modes on the sixth page.

Optional steps:

The finished product looks like this:

The IF first-use experience