Framer Studio • Twitter #2

Learn • That Twitter Splash • 18 lines

Callum Boddy

Published in

Framer

5 min readApr 25, 2016

#2 — That Twitter Splash in 18 lines of code

Really quick, very basic.

In this second tutorial, the goal is to recreate the iconic iOS Twitter splash screen.

The Final Product: http://bit.ly/cbz-twitter-framer

From the previous tutorial, there is only one new element we will see today:

State

And even then, we will just be touching the surface of State.

Just to quickly reiterate, this is a series where we are gradually introducing components from Framer Studio, if this is too basic for you, give me a follow and wait until we get to a later interaction at which point you can jump on board. I do intend to get to an advanced level of guides in the future.

I have also built this interaction as a Cocoapod for iOS it can be found here:
https://github.com/callumboddy/CBZSplashView

The Setup

Things you’ll need:

Framer Studio (61)
Sketch (3.7)

Resources

The Sketch file we are using today:

Sketch File: http://bit.ly/CBZ-Twitter-Sketch

Think Prototype

Not production

In this example, we are going to cheat. When it comes to prototyping cheating & shortcuts are great. Remember, our goal is to demonstrate to our stakeholder, developer or creative director an interaction or animation. As long as we achieve the same effect, it doesn’t matter too much how we got there. Yes, cleanliness and tweak-ability are the ideal, but not the goal. I believe over time, you’ll naturally start to think about reuse, but for now, aim for the posts.

Twitters splash screen consists of 2 components, the ContentLayer underneath, and Splash. If we were not cheating, one way we could achieve this is by using the ‘Bird’ as a mask on the Splash, and cutting in out just before we are about to grow and reveal the content underneath.

But for ease & time saving. Let’s think about it like this:

By having 3 layers represent our animation, the masking layer is already done for us. All we have to be concerned about is the different states in the animation and how to animate between them.

Code

Just like in the previous tutorial, we need to get to the starting point by importing the sketch file (see resources).

Our Sketch file represented in Framer Studio

We have our 3 layers to layers to play with.

Introducing States

Look at the 3 layers individually and consider their states throughout the interaction/animation.

The content (Twitter feed) sits behind and never changes state, this one is easy. none.

The top layer, with the white bird, shrinks to ~80% of its initial size. This gives us our first state.

Let’s call this state “shrink”.

Twitter.ShrinkLayer.states.add
    shrink:
         scale: 0.80

When we want to set the ShrinkLayer to shrink, we want it to be 80%

Now let’s animate to that state:

Twitter.ShrinkLayer.states.switch(“shrink”, time:0.5, delay: 2)

The switch() method allows us to add animation parameters. Here we are adding a delay of 2 seconds, mimicking background loading of data, and an animation time of half a second.

Once that animation has finished, let’s take away that top layer.

We can do this by adding a new Event Listener. The one we want here is Events.StateDidSwitch and we want to know specifically when the state on the shrink later switches. Once we have detected the state change, let’s set the opacity value on the top layer to 0.

Twitter.ShrinkLayer.on Events.StateDidSwitch, (from, to, states) ->
    Twitter.ShrinkLayer.opacity = 0

We don’t need to worry about (from, to, states) for now. They’ll come back in the future.

The Home Straight

Grand expansion

Much like the ShrinkLayer the GrowLayer has a secondary state. MASSIVE.

Let’s call it ‘grow’ and in much the same way as we did with the first layer, add it to the GrowLayer:

Twitter.GrowLayer.states.add
    grow:
        scale: 40

We are going to expand it to 40x its default size. (just a random guess that 40x will be sufficient for the effect, no method to this madness).

Secondly, we want to to grow the bird from the centre of the bird. By vaguely measuring in Preview, the centre of the bird is not actually half way down but about 46% of the way down the screen.

It’s about 614 pixels down out of the 1334 (screen height of an iPhone in pixels) available.

614/1334 = 0.46

Let’s set this as the origin point for our expansion:

Twitter.GrowLayer.originY = 0.46

And Lastly let’s animate it to MASSIVE.

We want to make it grow at the exact same time the top layer disappears, so let add another switch statement to the GrowLayer events when this happens.

Twitter.GrowLayer.states.switch(“grow”, time:0.3, delay: 0)

We don’t want any delay, and we want it to be pretty snappy. Just like Twitter.

See it’s not so hard

That is the end of part 2. Let me know if you enjoyed it/completed it/hated it or failed miserably.

Next weeks interaction is still undecided, suggestions welcome.

Get in touch if you want me to add a particular interaction to the future list, or if you would prefer me to create a prelude to the series