Creating an onboarding for your app can get slightly tricky when combining Lottie with a ViewPager. What if we could get rid of all the nuances and just import an animation, drop some configuration settings and enjoy life? In our previous "Whole Lottie Love" blog post, Chris Basha showed us how to leverage Lottie to deliver pixel-perfect animations for onboarding screens with some basic setup and minimal coding. Let’s take the next steps to simplicity.

Introducing Spritz

In order to maximise code reuse and deliver high quality onboarding animations, here at Novoda we developed Spritz, an Android library that lets you effortlessly attach a ViewPager to a LottieAnimationView. Spritz will do the heavy lifting, automatically triggering animations when the user enters a page and transitioning to the next page as they scroll.

How to make a perfect Spritz

So what do you need to create a beautiful animation for your onboarding?

  • a Lottie animation, containing all the steps for your onboarding pages and transitions in a sequential way
  • a ViewPager with the appropriate number of pages set
  • a splash of code

Then do some stirring, and that's it. Really, you don't need anything else.

Let us guide you to show you all the steps to prepare the tastiest Spritz ever.

Lottie animation, your prosecco

In order to make a successful Spritz that will make your guests jealous, your animation has to have one "step" for each transition between pages in the ViewPager.

When the transition to a new page has completed, you can optionally start a new "autoplay" step that will be played once the ViewPager has settled on the page.

For instance, if you have 3 pages the structure of your animation will be something like:

The duration of each "autoplay" and "swipe" segment is not mandated, and can differ from page to page. Keep track of the duration of each segment, and make sure they appear sequentially in the After Effects comp.

It’s good practice to avoid still frames on “swipe” segments, as the user will see no reaction as they’re sliding across the screen. Since this segment will usually be animated based on the user swipes, it’s a good idea to use a linear interpolation in “swipe” sections, as it will follow the user’s gesture matching its speed more closely.

An example of how the animation is triggered by swiping through a ViewPager: as soon as the swipe animation completes, the autoplay starts._

Once you have created such a comp in After Effects, you can export it to Lottie as explained in Chris’ blog post.

ViewPager, your glass

Add a ViewPager to your layout, right after your LottieAnimationView. Remember the ViewPager has to be on top of the LottieAnimationView, or touch events will be handled in a weird, unreliable way.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    app:lottie_autoPlay="false"
    app:lottie_fileName="my-lottie-animation.json" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</RelativeLayout>

A splash of code

The last step is to tell Spritz what are the steps that we baked in the Lottie animation.

Let's start by retrieving a Spritz builder by setting the target LottieAnimationView:

Spritz.Builder builder = Spritz.with(lottieAnimationView);

Let's then use the builder to set the steps with the appropriate durations of each "autoplay" and "swipe" sub-steps. This is done by calling withSteps() with our comp’s SpritzSteps:

Spritz.Builder builder = Spritz.with(lottieAnimationView)
    .withSteps(spritzStep1, spritzStep2, spritzStep3);

Creating the steps is easy, too. For example, a step that has an autoplay animation of 1 second and a transition animation of half a second would be built in the following way:

new SpritzStep.Builder()
    .withAutoPlayDuration(1, TimeUnit.SECONDS)
    .withSwipeDuration(500, TimeUnit.MILLISECONDS)
    .build();

The offsets between one step and another (within the full animation) will be automatically calculated by the library, which means that adding one step in between your pre-existing ones, or changing their order, won't introduce a significative diff in your code outside of the withSteps() method call.

In the end, just call builder.build() to retrieve your configured Spritz instance.

A full Spritz configuration will look somewhat similar to:

spritz = Spritz.with(lottieAnimationView)
    .withSteps(
        new SpritzStep.Builder()
            .withAutoPlayDuration(1, TimeUnit.SECONDS)
            .withSwipeDuration(500, TimeUnit.MILLISECONDS)
            .build(),
        new SpritzStep.Builder()
            .withAutoPlayDuration(500, TimeUnit.MILLISECONDS)
            .withSwipeDuration(500, TimeUnit.MILLISECONDS)
            .build(),
        new SpritzStep.Builder()
            .withAutoPlayDuration(500, TimeUnit.MILLISECONDS)
            .build()
    )
    .build();

Stirred, not shaken

Once you have created your Spritz configuration object, simply attach the ViewPager in onStart():

@Override
protected void onStart() {
    super.onStart();
    spritz.attachTo(viewPager);
    spritz.startPendingAnimations();
}

We are also calling spritz.startPendingAnimations() to make sure that any autoplay animation in the currently selected page is animated correctly.

Symmetrically, don't forget to detach your ViewPager from the Spritz instance in onStop():

@Override
protected void onStop() {
    spritz.detachFrom(viewPager);
    super.onStop();
}

Congratulations, you just made your first onboarding screen using Lottie and writing (almost) no code!

Get a taste of Spritz

Here's how a simple yet tasty animation looks like in our demo application:

So go ahead, install our demo app, "Taste of Spritz", from the Play Store and try it yourself!

Get a Taste of Spritz on Google Play

To use the library in your app, simply include the following Gradle dependency:

dependencies {
    implementation('com.novoda:spritz:1.0.0')
}

Conclusions

Spritz is a work-in-progress library, meaning the API can change while we improve it, but fear not: as you have noticed, the configuration needed to integrate an animation with a ViewPager is so minimal that any change would require only a few minutes.

You are encouraged to participate in the development of Spritz by giving out your ideas, opening bugs and — even better — submitting Pull Requests at our novoda/spritz Github repository!

The real spritz

Wait, were you here for an actual Spritz recipe? Alright, that’s easy:

  1. Add some ice into your glass
  2. Add 3 parts of prosecco
  3. Add 2 parts of Aperol, Campari, Rabarbaro or any other suitable Italian liquor
  4. Add a splash of soda
  5. Drop a slice of orange in it
  6. Stir
  7. Enjoy!

Remember that spritz is an aperitif, just like onboarding is for your app!