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.
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.
- Container layer
- A PageComponent to hold the pages
- Page one: The iPhone
- The icons around the iPhone
- Animating the icons around the iPhone
- Pages two and three: Instagram example recipe
- Stop the Instagram example recipe from moving
- Pages four and five
- Page four: iPhone that moves up
- Page four: Fading in the light trails and scaling them
- Page four: Animating the app icons
- Page five: Moving the iPhone off-screen and fading out the light trails
- Animating the app icons between pages four and five
- Page six
- Page six: White button and Sign-in banner
- Page indicators
- Splash screen
- Page six: Switching from ‘Create Account’ to ‘Sign in’ mode
- Page six: Switching back to ‘Create Account’ mode
- Page six: ‘Reset password’ mode
The finished product looks like this: