Pixate Tutorial: Animation based on scroll direction with pull to refresh

Nico
Nico
Jun 11, 2015 · 7 min read

Before starting, I would like to give a special thanks to my friend @mikelee for his support and feedback on writing my 1st tutorial.

Using Pixate on a daily basis, I was completely blown away by this app and how it uses image based interactions with no code! In my opinion, this is one of the best tools out there. It’s really easy to prototype 5 or 6 different directions and quickly get a feel for it on your device.

In this tutorial I’m going to show you how to use some of the “conditions” to create an animation based on scroll with pull to refresh. As an example, we are going to prototype Yik Yak scroll bars animations with its funny pull to refresh.

Prototype demo:

#1: Setup

Download all of the assets you will need http://cl.ly/bXpH

For those of you who haven’t created an account yet — do so here. Make sure you have Pixate installed on your device in order to run the native prototype.

#2: Create a New Prototype

Create a new prototype within your project (make sure to create a new project if you haven’t already done so). I’m going to title mine: Yik Yak prototype and select iPhone 6 as my device.

#3: Pixate Interface

Now you should be on the Pixate Interface. We will be using mainly Layers, Interactions/Animations on the right side and Properties, Animations on the left side. You can find more detailed information here.

Let’s get started! Click on the Assets tab on the top left.

Drag and drop all of the assets from the assets folder that you previously downloaded.

Now that you have imported all of the assets, let’s go to the Layer tab by clicking the top left square icon:

#4: Create a navbar

Click the + icon on the left side to create a new layer. Let’s call it navbar and give it dimensions of: width — 375pt and height — 64pt (iOS standard). Under Appearance click the the grey square and enter R:43 G:213 B:183. Your properties should look this now:

Click the Assets tab and drag & drop nav-element and Status Bar White on the screen. You can place them roughly on navbar(we’re going to adjust their position later).

On the Layer tab, select nav-element layer and give it the position left — 16pt and top — 23pt. Select Status Bar White.png and give it a position left — 6pt and top — 5pt. Our navbar is complete. Your screen should look like this:

#5: Scroll Animation

On the Layer panel, create a new layer and call it: scroll. Give it the dimensions of the screen which is the scroll area that we want. In this case width — 375pt and height — 667pt (iPhone 6 screen size) and set its Appearance to a transparent fill.

On the bottom left, click the Interaction tab and drag & drop a scroll interaction onto the scroll layer. Your properties should look like this:

Click the Assets tab and drag & drop content.png on the screen. Place it right at the bottom of the navbar. Its position should be left — 0pt and top — 64pt. On the Layers tab, select content.png and drag it on the scroll layer. You should see content.png as child of the scroll layer.

Let’s re-order our Layers panel. Click and drag scroll layer all the way to the bottom. Your Layers should look like this:

Let’s add the toolbar. Click the Assets tab and drag & drop toolbar.png. Put it at the very bottom of the screen.

We now have a scrollable prototype and we are going to animate bothnavbar and toolbar based on scroll direction.

#6: Animation based on scroll direction

Toolbar

Drag a Move Animation on toolbar.png based on scroll — scroll release w/ duration to final value. Give it a position of top — 667pt which is toolbar’s position when hidden (out of the screen area). Set Duration to 0.1s and delay: 0s with a linear easing curve.

Note: every animation will be based on a linear easing curve.

For the IF condition enter: scroll.velocityY >= 500 and scroll.contentY > 0. This is the condition that will hide the toolbar when scrolling up. To bring it back when scrolling down we have to add an ELSE condition. Click+condition and put top — 617pt which is the original position of our layer. Set duration to 0.1s and delay: 0s.

Your layer properties should look like that:

Our toolbar is now animating based on scroll.

We are going to use the same Move Animation and condition for navbarand nav-element.png

Navbar

Drag a Move Animation on navbar based on scroll — scroll release w/ duration to final value. Give it a position of top: -42pt and use the same IF condition: scroll.velocityY >= 500 and scroll.contentY > 0. Set duration to 0.1s and delay: 0s. Click +condition to add an ELSE condition and put top: 0pt. Set duration to 0.1s and delay 0s.

Nav-element

Drag a Move Animation on nav-element.png based on scroll — scroll release w/ duration to final value. Give it a position of top: -36pt and use the sameIF condition: scroll.velocityY >= 500 and scroll.contentY > 0. Set duration to 0.1s and delay: 0s. Click +condition to add an ELSE condition and put top — 23pt. Set duration to 0.1s and delay: 0s.

And lastly, drag a Fade Animation on nav-element.png based on scroll — scroll release w/ duration to final value. Fade to: 0% and use the same condition: scroll.velocityY >= 500 and scroll.contentY > 0. Set duration to 0.2s and delay 0s. Click +condition to add an ELSE condition and select Fade to: 100%. Set duration to 0.2s and delay: 0s.

#7: Pull to refresh

Feed

First let’s create our background. Create a new layer and call it bg and give it the dimensions: width — 375pt and left — 667pt. Under Appearance click the grey square and enter R:154 G:178 B:174. Place bg at the very bottom of the layers (layers position).

We are going to use 2 Move Animations with different timing to create our pull to refresh animation. Select scroll layer and drag 2 Move Animationsbased on scroll — scroll release w/ duration to final value.

In the first one, enter: scroll.contentY < -110 and move to Top — 110pt. Easing curve linear with duration: 0.2s and delay: 0s. When we scroll passed 110pt, our feed will move down to 110pt.

In the second one, enter: scroll.contentY < -110 and move to Top — 0pt. Easing curve linear with duration: 0.2s and delay: 1.5s. This will bring the feed back up after 1.5 seconds.

Loading icon

Drag & drop yak.png on the screen and set position to left — 155pt and top:-12pt. We are going to use the same 2 Move Animations along with 2 Rotate Animations to move down and rotate the yak.

1) Select yak.png and drag 2 Move animation based on scroll — scroll release w/ duration to final value.

-In the first Move Animation, enter: scroll.contentY < -110 and move to Top — 90pt. Set duration to: 0.2s and delay: 0s.

In the second Move Animation, enter: scroll.contentY < -110 and move to Top: -12pt. Set duration to: 0.2s and delay: 1.5s.

2) Select yak.png and drag 2 Rotate Animation based on scroll — scroll release w/ duration to final value.

In the first Rotate Animation, enter: scroll.contentY < -110 and rotate to 780°. Set duration to: 1.2s and delay: 0.4s.

In the second Rotate Animation, enter: scroll.contentY < -110 and rotate to: 0°. Set duration to: 0.2s and delay: 1.8s.

Our prototype is almost finished, we just need to place yak.png between ourscroll and bg layer. Your layers should look like this:

Final Prototype

Congrats! you just completed this tutorial.

Thank you for reading my first tutorial.

I’m curious to hear your feedback and feel free to ask any questions in the comments. I will be here to help and answer them.

@nicoduc
Design co-founder at
Five

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store