Loading animations are a common way to show users that an asset or page is actively loading. These animations work great for pages and individual assets, but what about refreshing lists? The pull-to-refresh gesture is perfect for this scenario and is one of the most popular mobile application gestures.
- Build pull-to-refresh interactive animation
- Use Nested Artboards
- Use the State Machine
Note: To review the animation set-up and see the keys, check out the file in the community.
Anatomy of Pull-to-Refresh
Before we start doing any animation or building a state machine, let's look at the anatomy of a pull-to-refresh interaction.
This interaction is broken into four parts:
Pull: The interaction starts when a user drags their finger down. This action is the pull. As you can see, the main motion is Marty growing in size as the user pulls the list farther down. Keep in mind that you can have any animation play here, but in general, think of this as an opportunity to introduce your assets. Zooms, position shifts, and rotations work nicely here.
Refresh: Once the list is dragged past a certain point and the user lifts their finger off the screen, it will trigger the refresh action. In this case, the Marty character has a slight bounce from a slightly larger scale down to 80% scale.
Idle: From here, an idle animation plays as the list loads. In this example, Marty has a constant idle animation playing, but you can have your asset idle in whatever way you like.’
Finish: Once the list finishes loading, the asset returns to its initial scale. This is the finish action. This portion of the interaction doesn't require any fancy animation, but you certainly could add something to make this portion unique.
The Building Blocks
Now that we understand the interaction we aim to build, let's walk through all of the pieces used in our example.
The building blocks consist of two artboards:
- Character artboard
- Main artboard
The character artboard consists of our character and its animations. For Marty, we have an idle riding animation and a blinking idle. Be sure to check out the community file (link) to dig into each animation.
The main artboard is where we build the animations for the state machine. We've added the character to the main artboard using a nested artboard. This setup allows us to create animations with fewer keys that focus on the camera movement (zooming).
The animations on this artboard include:
Pull start - Marty at the smallest scale
Pull over - Marty at the largest scale
Pull end - Marty at the loading scale
Load finish - Marty returning to the smallest scale
Marty loop - Time remap keys to have Marty loop animation play
Blink loop - Time remap keys to have the blink animation play
Background scale - keys to make background scale in a loop
Most of the animations on this artboard consist of a handful of keys. We're able to achieve this because the complex animations reside on the character artboard, and on this artboard, we only need to key the nested artboards scale.
Note: The Marty loop and Blink loop animations consist of keys that remap animation keys from the character artboard.
Building the interaction
Now that we've looked at all of the animations, it's time to start building the interaction with the State Machine. We'll start by getting the pull interaction working, then get all of the idle animations playing.
Create State Machine: Start by creating a new State Machine and renaming it. Be sure to keep it simple because your coder will need it when they work their magic.
Add and Rename Input: create a number input and rename it pullAmount. This input will allow us to configure our blend state, which controls the introduction of our asset. Remember, keep the input names simple; your coder will also need these to get your state machine working in the app, game, or website.
Add new state: right-click on the graph to add a new state. Select the state and change the state type from single animation to blend 1D.
Add animations to state: Click the plus button next to animations twice to add multiple animations to this state.
- Add pullAmount input.
- Add the Pull start and Pull over animation to this list.
- Change the value next to Pull over to 100.
Connect states: Connect the entry state to the blend state and test out the state machine. You should see the character grow and shrink in scale as you increase or decrease the input value.
Add trigger input: add a new trigger input and rename it pullRelease. We'll use this trigger to get our asset into its loading scale.
Create transition: Drag the Pull end animation onto the graph and create a transition from the blend state.
Configure transition: Let's configure this transition so that the state machine moves to the Pull end animation when the pullRelease input is triggered, and the pullAmount is >= 100.
Test: Go ahead and test the state machine to ensure that everything is working. At this point, your character should be able to go from its initial scale to a large scale and down to the loading scale.
Add next trigger input: Now, add a new trigger input and rename it loadFinish.
Create transition: Drag the Load finished animation onto the graph and create a transition from the Pull end state.
Configure transition: Go ahead and configure the transition to occur when the loadFinish trigger activates.
Create transition to exit state: Finally, create a transition from the Load finish animation to the Exit state. Be sure to set the duration on the transition to 100% so that the Load finish animation plays fully before leaving the state.
Test: When you test the state machine, you should be able to bring your asset from the smallest scale to the largest scale and return it to the original scale. If not, go back and double-check everything.
You'll notice that our character's idle animation, background idle, and blinking idle animations aren't playing. Each layer of the state machine can only play one animation at a time. In this case, we want four animations playing, so we’ll need to create additional layers to accommodate that.
Identify and label the first layer: Switch to the layers tab and rename your first layer Pull. It's always a good idea to rename layers to make it easier to remember each layer's purpose.
Add layer: Add a new layer and rename it Marty Loop.
Add animation to layer and connect: Drag the Marty loop animation onto the graph and connect it to the entry state with a transition.
Test: When you play the state machine, you'll notice that the character is now smoothly skating on his hoverboard regardless of what state our other layers are on.
Repeat for additional idle animations: Repeat these steps until the eyes are blinking and the background idle is also playing.
You’ve now created a pull to refresh animation! Great Job! The only thing left to do is download the .riv file and send it over to your coder. Remember, if you want to go back and edit any artwork or animations you can safely do this without affecting implementation but be sure to keep your developer in the loop.