Framer Studio • Instagram #1

Learn • That Instagram Scroll • 30 lines

Hopefully, you’ll end up with something like this.

The Intro

I intend to release weekly little articles illustrating how to recreate some of the most famous micro-interactions that we see in apps today.

I’m going to keep the tutorials short and sweet so you can learn bit by bit how to create these interactions and hopefully, use the code to bring some ideas and ways of working into your daily workflow, whether that is as a designer, developer or possibly you just want to dabble in code.

For me, Framer Studio is a great environment for learning to code. I have always found coding much more satisfying when you get instant visual feedback on the code you are writing and that is exactly what Framer provides.

I’m going to dive straight in and hope that you are able to follow. If this tutorial is already out of touch with you, leave a comment and I'll happily release a prelude to this article that explains some of the fundamentals of programming & Framer.

#1 — That Instagram Scroll in 30 lines of code

So welcome to #1. What we are going to try and build through this example is the hiding navigation bar in Instagram.

The Final Product: http://bit.ly/CBZ-Instagram-1

This is a good place to start as we introduce some of the basic concepts to working in Framer and a couple of the elements we have at our disposal:

• Layer
• ScrollComponent
• Events.Move

Don’t worry too much about these right now, but I’m sure you can probably guess what they are.

The Setup

Things you’ll need:

• Framer Studio (61)
• Sketch (3.7)

Resources

Use this sketch file, it will save you some time. bit.ly/CBZ-Framer-Instagram

There is a certain file structure you need to make these prototypes. I intend to create a step by step guide on this soon.

• Download the Sketch file and open it. (Make sure it is the only open sketch file)
• Start a new project in Framer Studio.
• Select Import from the top-left corner of Framer and import Instagram @ 1x.

Framer should then insert a line similar to this:

Instagram = Framer.Importer.load(“imported/Instagram@1x”)

Think of the keyword Instagram as the top layer of the app.

(Make sure that you select iPhone 6S for the device)

Let the coding begin

You should be seeing below:

The first thing that stands out here is that there is no TabBar at the bottom of the screen. It has got lost a long way below as the ContentView pushes it 0ff to beyond the depths of the screen. This was intentional in the Sketch file to give us a bit of content to scroll.

Let’s fix this. In order to do this, we need to adjust the y value of the TabBar.

Instagram.TabBar.maxY = Screen.height

The reason for using maxY here over y is that maxY refers to the bottom of the layer whereas y is the top of the layer.

Beautiful. Now let’s start to add some interactivity to this:

We are going to be using the ScrollComponent, as you’ll assume correctly, this component allows us to scroll certain layers.

The layer we want to scroll here is that main ContentView. In order to drop this layer into a scroll view we need to declare a new ScrollComponent this can be done like so:

scrollView = ScrollComponent.wrap(Instagram.ContentView)

English Translation:

Wrap the Instagram.ContentView in a ScrollComponent, assign it to a variable called scrollView.

This, however, allows the layer to be scrolled in any direction. There are some properties that we can customise on the ScrollComponent that allow us to make it behave more how we intended.

specifically these 3 properties:

scrollHorizontal
y
contentInset

Let’s set them on our new scrollView like this

scrollView.scrollHorizontal = false
scrollView.y = 40
scrollView.contentInset =
 top: 100
 bottom: Instagram.TabBar.height

by setting the scrollHorizontal to false we are able to stop the users dragging the content along the left/right axis.

The reason why the y value has been set to 40 is because it is the fixed height of the status bar on the iPhone.

What makes Instagrams scrolling different?

We are almost there, but this is what we are here for..

the most famous micro-interactions

Instagrams scrolling has a subtle difference if you look closely, there NavBarLogo and the InboxItem scale & fade away simultaneously to give a delightful effect — This is what we are here to recreate.

It gets a little harder from here…

We need an Event Listener on to our ScrollView. We want to know when it is moving, add the EventListener like so:

scrollView.on Events.Move, (event, draggable, layer) ->

I don’t want to dive too much into the things we don’t need to know for this tutorial. If you stick with it, i’m sure we’ll come back over some of this again

In order to prove to you that this method is doing something, let’s try printing something every time this line get called:

WARNING: every line of code put below this method definition must be indented with a TAB otherwise Framer gets angry & then you’ll get angry.

scrollView.on Events.Move, (event, draggable, layer) ->
    print ("i'm scrollllinggg…")

We are, indeed scrolling here. (you can remove that line now, it will annoy you).

We want to know when the User is scrolling upwards:

Logic:
1. We know the user is scrolling when the y of the draggable
2. We don’t care when the user is dragging down
3. We need to translate that drag into a number between 0 & 1 for our scale & opacity

From this events method we are interested in that draggable parameter, this is the layer the user is currently interacting with:

At start time the draggable layers y coordinate is 100

You can print this instead of “i’m scrolling..” as proof

so let save that in a variable

scrollView.on Events.Move, (event, draggable, layer) ->
    startingLocation = 100

To put those first 2 pieces of Logic 1 & 2 into place we need to a couple of if statements

#1. We know the user is scrolling when the y of the draggable
    y = if draggable.y < startingLocation then draggable.y else 0
#2. We don't care when the user is dragging down.
    y = if y > startingLocation then 0 else y

This gives us our y offsets when the user is scrolling.

We need to convert these into a [0..1] scale. Framer provides us with a convenience method for this

scale = Utils.modulate(y, [0, 100], [0, 1])

This will translate the number (which will be between 0 & 100) to a number between 0 and 1

Lastly, if y is 0 then we want it to actually be 1 (i.e if the user is scrolling downwards)

P.S remember your indentations… TABS only.

if y == 0 
    scale = 1

The Final Application

All the Logic is done, we have translated our Users scrolling to a value scale that we want. And while we are there, the fade on both of the items is the same as the scaling, so we can apply the opacity to that same scaling value.

Let’s apply it:

# - Apply the Scaling
Instagram.NavBarLogo.scale = scale
Instagram.InboxItem.scale = scale
# - Apply the Opacity
Instagram.NavigationBar.opacity = scale

The Chefs touch

For the eagle eyed

You’ll notice that your logo and Inbox Items scales but Instagrams actually scales from the top-middle not the centre of each of their Navigation Bar Items.

Simply add these 2 lines just before the Events.on method:

# Lets expand scale the icons from the top
Instagram.NavBarLogo.originY = 0
Instagram.InboxItem.originY = 0

You can rest now..

Thank you

If you made it this far

This is my first blog post so please go easy on me. If there are improvements to my style please don’t hesitate to give me feedback. You can be as harsh as you like.

If you get stuck or have questions about this tutorial, Tweet me:

Twitter: @callumboddy

The next interaction we’ll be looking at is Twitters Splash Screen coming soon.