Pull to Refresh Interaction
In today’s video we’re going to take a look at how you can combine a drag trigger with auto-animate to create a pull to refresh style interaction using Adobe XD.
WHAT YOU’LL LEARN IN THIS VIDEO
Using Repeat Grids
Creating basic shapes
Animated between several artboards
Working with Auto-Animate
Using time triggers
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe, and in today’s video we’re going to take a look at how you can combine a drag trigger with auto-animate to create a pull to refresh style interaction using Adobe XD. Let’s dive in.
On this artboard, I’m going to first create a few cards extending vertically to act as a photo feed. With all of these elements selected, I’ll press the Repeat Grid button over to the right, then pull the new handle downwards until I have a few more. With those in place, I’ll also grab a few images from Finder and drag them onto the grid, just to give this design a more real-world look.
With the feed now set up, let’s add in the elements that will appear behind it, starting with a simple rectangle for the background. I’ll go with a nice vibrant pink. Next up, we need an icon! You can use just about anything, but I’m going to grab this shutter icon, enlarge it a bit, then change the color to white.
Now, making sure that both of these elements are at the back of the layer stack, I’ll move the shutter icon up and slightly behind the bar at the top. This will let it slide down as the cards are pulled. I’m also going to rotate the icon counter-clockwise just a touch so that it subtly spins on drag.
Great. With the first state complete, let’s work on the second. I’ll duplicate this artboard over to the right, then rearrange the elements to let XD know what should be animated – and in this case, the feed and shutter will be shifted down, and I’ll rotate the icon back to 0 degrees.
Finally, one more artboard to initiate the spin. Here, I’m only going to set the rotation to 360 degrees so it completes a full circle.
Now that the artboards are ready to go, let’s wire this up. In Prototype mode, I’ll start by selecting the repeat grid containing the various cards and drag the blue handle to the second artboard. Instead of Tap, I’ll want a drag trigger which will automatically default to Auto-Animate.
Next, I want to immediately transition to the third screen. To do this, I’ll select the entire second artboard, then drag the handle to the third. This will let me choose Time as the trigger. I’ll again want Auto-Animate for the action, then for the easing, I’ll set it to In-Out with a duration of around 2 seconds.
Lastly, one more timed transition back to the first artboard, this time I’ll speed up the duration and set the easing to Snap.
With all that set, let’s see this in action. The play button at the top will launch the preview, where I can now drag my feed down, kicking off the rest of the interaction.
If you want to get really fancy, you can also mess around with paths to create a slightly more fun interaction and even have new photos fly in from above.
And that’s how you can create a pull to refresh interaction using Adobe XD. I’d love to see all the fun ideas you come up with so feel free to share them with me on Twitter.