Animated onboarding

Onboarding screens are usually the first screens a user will see in your app, so making them a little interesting is worth the extra effort. I came across an onboarding demo on dribble, and thought I would have a go at implementing it in flutter.

Here is the finished product running.

The onboarding screens are placed into a PageView and the PageView is shown in a Stack with some page indicators at the bottom.

To make the onboarding more interesting each screens graphical elements and text are broken up and shown using different animation effects, so they appear to slide, fade, zoom, and rotate in and out of place as the page is scrolled to left or right.

To implement the effects, I knew I needed a bunch of animations and I needed to drive the animations from the page scroll position rather than an animation controller. After a little searching I came across a demo on Github which really helped me understand how this could be done, and from which I got the page indicator code so it too is animated.

The key component is being able to drive an animation from the position of the PageViews scroll. We can get that by providing a PageView a PageController and adding a listener. This will give us a double from 0 to 1 for page zero, 1 to 2 for page two, from 2 to 3 for page three and so on. So if you were half way scrolling paging 1 to the right, you’d get 1.5. This gets put into a ValueNotifier, which is used by the AnimationBuilder to trigger updates.

To create the effects, I created four classes, each implementing a different effect. Each effect takes the ValueNotifier and the page number in the PageView as parameters.

When ValueNotifier get updated, it causes the AnimationBuilder builder function to be called. In that function the effects are applied to the child widget. The page number is required so that the code can figure out if the scroll is to the left or the right, it does this by comparing the scroll position passed in the ValueNotifier to the page number. Each effect implements its animation build differently to achieve the effect.

SlideEffect, takes a xoffset and a yoffset, as the page is scrolled the child widget gets offset by this amount multiplied by the animation position. For example of the xoffset was 100 and you where half way through scrolling a page it would be 100 * 0.5, so offset 50. With this effect you can create layered scrolling, where some widgets scroll on/off the screen faster than others.

RotateEffect, rotates the child widget depending on the animation position. This make widgets spin 360 degrees as they scroll on or off the screen.

ScaleEffect, scales the child widget from 0 to 1 depending on the animation position. This makes a widgets grow and shrink as they scroll on or off the screen.

FadeEffect, fades the child widget depending on the animation position. This makes widgets fade in and out and they scroll on and off the screen.

These effects can be wrapped. You might have a ScaleEffect, with a child that is a RotateEffect, so the widget grows, shrinks, and rotates as it scrolls on or off the screen.

With these four effects I was able to closely match the dribble inspired onboarding screens. Thankfully my Inkscape skills are sufficient that I was able to recreate the assets seen on dribble.

On that note, the demo uses .svgs to load up the graphics. In a real app you would want to use .pngs, as the load time is a little slow for .svgs.

You could take it a step further and use these effects on any screen in your app. It doesn't need to be an image, you can apply the effect to any widget.

The full source is available here.