Pixate Tutorial: Animation based on scroll direction with pull to refresh
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.
