Creating a Card Animation in Principle

Let me show you how to create a Star Wars inspired Prototype

Legal Information: Lucasfilm, the Lucasfilm logo, STAR WARS and all related characters, names and indicia are trademarks of & copyright © 2012 Lucasfilm Ltd. All rights reserved. , or their respective trademark and copyright holders.

Introduction

Who doesn’t love a good Card Animation hey? We can never get enough of them right? This one though is a little more current, what with a certain film that rocked our world recently. Yes, we’re going all out Star Wars in this Tutorial folks, and creating a Rogue One inspired Card Animation inside of the awesome Principle.

I know there’s folks who may be a young padawan when it comes to dealing with Timelines when Prototyping, and this way of working has been known to send people running for the Dune Sea. But with this detailed Tutorial I hope to show you how powerful a Prototyping tool Principle is once you know you’re way around it.

The force is strong with this Tutorial (Star Wars Ref #01).

Tutorial Files Checklist

Before we start, make sure you have the following applications installed, and assets downloaded…

• Sketch
• Principle
• Tutorial Assets (includes Sketch file to import into Principle)
• San Francisco Font*

*You can find this in the Tutorial Assets/Fonts folder.

Applications, and assets at the ready? Cool. Let’s get to it…

What we’ll be creating

Here’s a preview of what you’ll be creating with this Tutorial…

Opening up Principle

You can leave everything as it is here. The Preview* window should default to the iPhone 6 size, so that’s all cool. If that’s not the case, just choose iPhone 6 from the Size Presets menu in the Inspector.

Size Presets

*When working through a prototype, the Preview window in Principle is a very handy feature to have, but nothing beats testing on a real-world device, so I would recommend grabbing a copy of Principle Mirror from the App Store here.

Importing the design from Sketch

With both Sketch, and the Sketch file from the Tutorial Assets folder open, click the Import button in the Toolbar, choose to import at 2x, and click Import.

Importing the design from Sketch

Your screens will be imported in from Sketch and aligned in the Canvas area. You can click on each of the Screens (you’ll get the green border showing you which screen you’ve selected), and see it appear in the Preview window…

The Preview Window

… and from the Layer List you will see that the order of the Screens, Groups, and Layers has been preserved from your original Sketch file…

Layer hierarchy preserved from Sketch

Quick Tip: You will see that some of the Layers, and Groups have been flattened once they’ve appeared in Principle. Now some of those I’ve purposely done that to by simply adding an Asterisk (*) to the end of the Layer/Group name. It just keeps things more manageable, and helps with the size, and speed of your Prototypes. Some other Groups that have been flattened are due to that fact that a Mask was used in my original Sketch file (i.e. Header), and that Principle flattens Groups that contain a Mask, so just bear that in mind.

Now, the file that was created in Sketch was a set of 4 Artboards (I just like to lay my Sketch files out like that as they’re much easier to reference when you move to the prototyping stage), but the Prototype we’ll be creating in Principle is of course happening inside of one screen, with the Profile Cards appearing from the left, and right as the user swipes, so we will need to lay out some of the elements a little differently here.

Sketch File

Principle File

Let me show you how. It will all make sense. This is the Tutorial you’re looking for (Star Wars Ref #02).

Animating the Headers

So currently we have the 4 screens, with our collection of Rogue One characters.

Rogue One Character Cards

The first character will of course be Orson Krennic (he looks like trouble), and then the user will be able to swipe left to reveal the other characters.

Starting with the Header layer, we’ll place each one of those inside of the first (and soon to be the only) Screen.

So copy and paste (Cmd + C & Cmd + V) each of the Headers from the other 3 screens into the first screen, placing them on top of one another. Drag & Drop them in the Layer List so they are in the same order as the screens, until you have something like the following…

Adding all Header layers to the first screen

Then (Shift Click) to select all the Header layers, and (Cmd + G) to group them. Use (Cmd + R) to rename the group to Headers.

Group, and Rename

Now to copy the Profile Cards, and Background layer (I use this solely as an alignment aid) across to the first screen, and then re-align them correctly.

So, from the Jyn Erso Screen, (Cmd + Click) to select the Jyn Card Group, and Background Layer…

Select Card group, and Background layer

Then copy, and paste these elements into the first screen, and with the Background Layer selected, drop the Opacity down to 0% in the Inspector…

Reduce the Opacity to 0% in the Inspector

Now do the same thing for the last two screens (don’t forget to reduce the Opacity of the Background Layers to 0, and to arrange them correctly in the Layer List), until you have something like the following…

Arrange the Card, and Background layers

(Shift Click) to select all those Groups/Layers, Group them (Cmd + G), and then rename (Cmd + R) to Views.

Rename the group to Views

Now go ahead and delete the other 3 screens, we won’t be needing them anymore. Just select them in the Layer List and hit (Delete).

Select Screens, and Delete

Quickly before we move on, let’s group some elements, and arrange our Layer List correctly.

Firstly, select each of the card groups we copied across, and their corresponding background layers, and group (Cmd + G) them.

Group the Cards, and Background layers

Then rearrange the groups until you have something like the following…

Rearrange the groups/layers in the Layer List

And finally (Double-Click) on the screen name, and change it to, well simply, Screen.

Change the screen name

Re-aligning the Cards

Now to re-align the Cards that are currently hidden behind the first one.

Select the 2nd Card (Jyn Erso) in the Layer List, and enter 375 (the width of our Screen) into the X field in the Inspector. This will place the Card directly next to the Screen, as the Screen itself is sat at 0 on the X axis.

Re-align the Jyn Erso Card

For the next Card, we’ll do some simple math in the X field. Enter 375*2.

Use simple Math in the X field

And then 375*3 for the last Card.

We now have everything laid out perfectly.

Yes you may be asking “Well why didn’t you just lay everything out like this in Sketch?”, and yes you could do this, but like I mentioned before, even though we’re going to create an interaction that’s happening inside of one screen, I still, when creating my artwork inside of Sketch like to have a complete overview of how my screens will look in their complete state of an interaction.

Ok, time to bring a bit of motion to the proceedings.

Firstly we’re going to create a simple Paging animation between each of our Cards, and that’s super-simple to setup in Principle.

Select the Views group in the Layer List, and then from Inspector choose Page from the Horizontal select menu.

Settting up Paged Scrolling

Make sure (if they’re not already) that the Scroll guides are snapped to the left, and right edges of the screen also…

Snap the Scroll Guides into place

Go ahead and give your Cards a quick swipe in the Preview window. All looking good right? Simple, effective, but still lacking that bit of polish to rise it above the ranks of “Yeah looks ok and all but…”.

Let’s bring a little more movement to our prototype. Subtlety is key here, with those simple animations that makes the user experience that much more enjoyable, without making the user come down with a mild dose of motion-sickness.

Quick Tip: When using the Preview, simply hit W to reset/restart your Prototype.

Working with Drivers

Principle - Documentation

To open up the Drivers Panel, simply click the Drivers button in the Toolbar.

Open up the Drivers Panel

Let’s first concentrate on the Header gradients at the top of our screen, and animate a simple fade between them as we swipe through the cards.

With the Scrub Head set at 0, select the first Header from the Layer List, and then click the Plus (+) icon next to the layer name in the Drivers Panel, and choose Opacity from the pop-out menu.

Choose Opacity from the Drivers pop-out Menu

This will now create a Keyframe with the current value of our Header layer, which is set at 100% Opacity.

Setting the first Keyframe

Quick Tip: If you ever want to remove a certain Keyframe from your animation, simply select it and then click on the Remove (X) icon next to the Property name.

Grab the Scrub Head at the top of the Drivers Panel, and drag it to the right until it’s set to 375 (which is the width of our Screen remember). You’ll of course see the elements shift in the Canvas area as we do this, and the 2nd Card slide into view.

Drag the Scrub Head to 375

Now we want to fade out the first Header at this point, so simply reduce the Opacity all the way down to 0 in the Inspector.

Reduce the Opacity for the Header layer

You will now see that a new Keyframe has been added automatically to the Drivers Panel.

End Keyframe added to the animation

Grab the Scrub Head, and move it back, and forward to see the animation in effect.

Let’s repeat similar steps for the other Header layers. With the Scrub Head sat at 375, select Header 2 in the Layer List, and then click the Plus (+) icon next to its name in the Drivers Panel, and choose Opacity to add a Keyframe.

Drag the Scrub Head to the right, until the next Card sits inside of the Screen. Or just do some simple Math in your head; 375*2 = 750. Done!

Again, reduce the Opacity down to 0, and your Keyframes will be connected.

Connected Keyframes

Go ahead and setup the final Header Keyframes yourself. You’ve got this!

Keyframes for the last Header layer

Ok. Header animations sorted. Let’s move onto the bulk of our work inside of Principle, where we’ll stagger the appearance of the Text Layers, Emblem, and Button as they slide in, and out of the Screen, as well as adjusting the Scale, and Opacity for some of those elements.

We’ll start with the Jyn Erso Card first, and specifically at the Profile Details group, where we’ll simply be adjusting its Opacity value as its X position changes.

Select the Profile Details group

So with the Scrub Head set at 0, and the Profile Details group selected, click the Plus (+) icon next to the group name in the Drivers Panel, choose Opacity, and then reduce its Opacity down to 20%.

Reduce the Opacity down to 20%

Then like we did for the Header gradients previously, drag the Scrub Head to 375, and increase the Opacity back up to 100%.

Increase the Opacity back up to 100%

Now for the Rebels Emblem, where we’ll be adjusting its Scale, and X value.

Please Note: Don’t forget to drag the Scrub Head back to 0 before we make the following adjustments.

Ok. Use (Cmd + Click) to select the Rebels Emblem on the Canvas, and add both a Scale, and X value Keyframe in the Drivers Panel.

Adding two Keyframes at the same time

And then, from the Inspector, reduce the Scale to 0.5, and change the X value to 80.

Reduce the Scale, and adjust the X positioning

Like before, grab that trusty Scrub Head, positioning it at 375, then from the Inspector, bring the Scale of the Emblem back up to 1, and the X value back to 0.

Return the Scale, and X positioning to their original settings

Give things a quick try, either by dragging the Scrub Head back and to, or using the Preview window, to see this subtle animation happening.

Ok, back to it, we’ve got a lot more ground to cover…

Let’s adjust the X positioning for the Text Layers, and Button, following a similar process as before.

Make sure the Scrub Head is positioned at 0, and then add an X value Keyframe to each of the following layers, then make the following X value adjustments in the Inspector -

• 1500 SWP 230
• Jyn Erso 120
• Used to operating… 150
• Swap Button 220

Until your Card layout on the Canvas looks similar to the following…

Adding X value Keyframes to each of the layers

Quick Tip: You can see above that I’ve asked you to make specific X position settings to the Text Layers, and if you have an extreme amount of attention to detail like I have you’ll feel right at home. But please feel free to just drag the layers themselves on the Canvas to get similar positioning. You don’t have to have the layers set to a specific X value, as when a user is swiping through the finished prototype/app, the slight differences in X positioning between each of the cards would not be perceptible to the eye anyway, but there you go.

Drag the Scrub Head across to 375, and selecting each of the layers, one at a time, change the X values to return them to their default positions…

• 1500 SWP 164
• Jyn Erso 0
• Used to operating… 0
• Swap Button 102

Go ahead and give things a try-out in the Preview window, and you’ll see the Text Layers slide in in a slightly staggered fashion. Perfect!

Ok. Now here’s the moment the training wheels come off a little. Following similar steps to what I showed you for the Jyn Erso Card, go ahead and create the same animations/transitions for the Cassian Andor, and Shoretrooper Cards.

Please Note: Remember to set the Scrub Heads initial position to 375 (Cassian Andor), and 750 (Shoretrooper), then begin adjusting Layers. Then, when you want to bring the elements back into their default positions to have the Scrub Head set at 750 (Cassian Andor), and 1125 (Shoretrooper) respectively. Go on, you got this!

Quick Tip: If you’re Drivers Panel is feeling a little on the tight side, just grab it at the bottom and pull down to increase the size of the window.

You’re back. Awesome! Hopefully you have something that looks like the following in the Canvas area…

Layers laid out correctly on the Canvas

…and something like this in the Drivers Panel…

Keyframes set in the Drivers Panel

You do. Nice work!

Give things a quick whirl in the Preview window.

Looks fine, and dandy right? Or have you noticed an issue here?

Yup. The staggered animation is not in effect on the Orson Krennic Card, nor is it happening when the Cards appear from the left. Let’s fix that up quicker than you can grab Power Convertors from Toshi Station (Star Wars Ref #03).

Place the Scrub Head at 1125, so the first 3 Cards are sat outside, and to the left of the Screen.

Position Cards to the left

What we’re going to do here is pretty similar to what we did in the previous part of the Tutorial, where we’ll change the Scale, Opacity, and X value of the various Card layers, and snap them back into their original positions once they’re back inside of the Screen. But this time the elements will be staggered to the left of their Cards.

Let me show you how to set up the Cassian Andor Card, and then we can pop off those training wheels again, and you can set up the rest of the Cards yourself (You can leave the Shoretrooper Card as it is).

With the Scrub Head at 1125, select the Profile Details group and reduce the Opacity down to 20%. You will see that a new Keyframe was added to the Opacity property in the Drivers Panel.

Reduce Opacity on the Profile Details

For the Emblem, reduce its Scale to 0.5, and set its X value to -40.

Then for the Text Layers, and Button enter these X values in the Inspector -

• 890 SWP 110
• Cassian Andor -110
• An accomplished alliance… -140
• Swap Button -100

You should then have something like the following…

Cassian Andor Card laid out

Ok. Training Wheels off once more. Go ahead and setup similar properties for the Jyn Erso, and Orson Krennic Cards.

Please Note: Remember to set the Scrub Heads initial position to 750 (Jyn Erso), and 375 (Orson Krennic), then begin adjusting Layers. And also, with the Orson Krennic Card, to set the Cards elements back to their original positioning when the Scrub Head is at 0 (as this is the first Card you see when opening the Prototype, so everything needs to be in its default positioning).

Set the Scrub Head to 0

You should then have something that looks like the following…

Cards laid out correctly on the Canvas

Everything in position? Drivers set up correctly? Awesome. Give the Preview a quick swipe through now. Looks better right?

Animating the Pagination

Now, the Pagination seems a little static currently. Let’s quickly fix that, and finish up this Tutorial.

We’re going to concentrate on the Active layer inside of the Pagination group…

Select the Active Dot

…and adjust the X, and Scale properties for this layer.

So with the layer selected, click on the Plus (+) icon in the Drivers Panel, and choose the X option to create the first Keyframe.

Create the first Keyframe

Then drag the Scrub Head all the way across to 1125, so the Shoretrooper Card is inside of the Screen.

Hold (Shift) to keep the Active dot aligned on the X axis, and drag it across until it sits on top of the last grey dot. You will see the Keyframes are now connected.

Hold Shift to keep the Dot aligned

A quick swipe through the Preview will show the dot positioning itself correctly as you swipe through the Cards. Looks ok, but let’s add a little more sparkle to this lowly red dot.

With the Scrub Head at 0, and the Active dot still selected, select the Scale option in the Drivers Panel.

Select the Scale option in the Drivers Panel

Then, move the Scrub Head to 100, and change the Scale of the dot to 0.6.

Reduce the Scale of the Active Dot

Grab the Scrub Head again, move it to 375, and increase the Scale back up to 1.

Increase the Scale back up to 1

Now follow similar steps for the rest of the Pagination, remembering to Scale the dot back up to 1 when it hits each Card (750, and 1125), until the Drivers Panel looks something like the following…

Keyframes for the completed Pagination

And that folks is a wrap! Nice work there. Cue John Williams fanfare!

Thanks for reading the article,

Marc

Oh. Before you go, don’t miss out on this amazing offer for Sketch users…

Want to rapidly improve your design workflow?

Meet Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before…

Use the offer code MEDIUM20 to receive 20% OFF Cabana here.