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.
*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.
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…
… 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…
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.
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.
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…
Then (Shift Click) to select all the Header layers, and (Cmd + G) to group them. Use (Cmd + R) to rename the group to Headers.
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…
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…
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…
(Shift Click) to select all those Groups/Layers, Group them (Cmd + G), and then rename (Cmd + R) 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).
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.
Then rearrange the groups until you have something like the following…
And finally (Double-Click) on the screen name, and change it to, well simply, Screen.
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.
For the next Card, we’ll do some simple math in the X field. Enter 375*2.
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.
Make sure (if they’re not already) that the Scroll guides are snapped to the left, and right edges of the screen also…
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
To open up the Drivers Panel, simply click the Drivers button in the Toolbar.
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.
This will now create a Keyframe with the current value of our Header layer, which is set at 100% Opacity.
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.
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.
You will now see that a new Keyframe has been added automatically to the Drivers Panel.
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.
Go ahead and setup the final Header Keyframes yourself. You’ve got this!
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.
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%.
Then like we did for the Header gradients previously, drag the Scrub Head to 375, and 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.
And then, from the Inspector, reduce the Scale to 0.5, and change the X value to 80.
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.
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…
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…
…and something like this 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.
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.
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…
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).
You should then have something that looks like the following…
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…
…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.
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.
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.
Then, move the Scrub Head to 100, and change the Scale of the dot to 0.6.
Grab the Scrub Head again, move it to 375, and 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…
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.
