Creating a Card Animation with Principle

Categories Principle, Prototyping

Introduction

Who doesn’t love a good Card Animation hey? We can never get enough of those animated cards of joy, right?

Now, I know there’s folks out there who may have a slight aversion to dealing with Timelines when Prototyping, and this way of working has been known to send people running for their copy of Adobe XD. 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.

Whereas the Animate feature in Principle concentrates on transitions that occur between Screens/Artboards, Drivers concentrate on transitions that happen inside of one screen, and allow you to create interactive parallax effects, enable layers to animate depending on the scroll position amongst many other things.

Drivers work very much the same as a typical animation timeline, except Drivers animate based on a changing property, instead of time.

The animation possibilities with Drivers are endless, and in this tutorial I aim to show you how powerful a feature this is. Let’s jump on into the driving seat (No more terrible puns I promise).


If you haven’t already, make sure you have the following applications, and assets installed…

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

Quick Note: If you want to see what we’ll be creating in this Tutorial, you can find the completed Principle file in the Tutorial Assets/Principle folder.

Applications, and assets at the ready? Cool! Let’s do this.


Opening up Principle

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

Quick Tip: 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

Jump over to Sketch, and open up the Profile Cards Sketch file from the Tutorial Assets/Sketch folder.

Then hop on back to Principle, 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.

From the Layer List you will see that the order of the Screens, Groups, and Layers has been preserved from your original Sketch file. Very handy indeed.

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.

Animating the Headers

So currently we have the 4 screens with our collection of creative profiles.

The first character profile will be Joshua Mason (Profile Card #1), 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 (I use this solely as an alignment aid) Group/Layer across to the first screen, and then re-align them correctly.

So, from the Profile Card #2 Screen, (Cmd + Click) to select the Card #2 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 main 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 Card #2 + Background 2 group 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.

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? Well, not exactly. There’s a few elements there that really aren’t doing a great deal currently.

Let’s fix things up, and bring a little more movement to our prototype. Subtlety is key here, with those small visual flourishes that makes the user experience that much more enjoyable.

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). You’ll of course see the elements shift in the Canvas area as we do this, and the second 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 now be connected.

Go ahead and setup the next Header (Header 3) 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 Card #2 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 Available Badge element, where we’ll be adjusting its Scale, and X properties.

Quick 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 Available Badge element on the Canvas, and add both a Scale, and X property 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, and position it at 375, then from the Inspector, bring the Scale of the element 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, Social Icons, and Button, following a similar process as before.

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

  • Social Icons 230
  • Sophie Jones 120
  • I’ve worked for various… 150
  • Profile 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 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.

Ok. 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…

  • Social Icons 200
  • Sophie Jones 0
  • I’ve worked for various… 0
  • Profile Button 75

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 Card #2, go ahead and create the same animations/transitions for Card #3 and #4.

Please Note: Remember to set the Scrub Heads initial position to 375 (Card #3), and 750 (Card #4), 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 (Card #3), and 1125 (Card #4) 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 this in the Canvas area…

…and something like the following 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 Card #1, nor is it happening when the cards slide in from the left. Let’s fix that up quick.

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 Card #3, and then we can pop off those training wheels again and you can lay out the rest of the cards yourself (You can leave Card #4 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 Available Badge element, reduce its Scale to 0.5, and set its X value to -40.

Then for the Text Layers, Social Icons, and Button (selecting them one at a time) enter these X values in the Inspector –

  • Social Icons 110
  • Stanley Green -110
  • I’m a Designer… -140
  • Profile Button -100

You should then have something like the following…

Ok. Training Wheels off once more. Go ahead and set up similar properties for Card #2, and #1.

Please Note: Remember to set the Scrub Heads initial position to 750 (Card #2), and 375 (Card #1), then begin adjusting Layers. With Card #1 you will need to set up new properties in the Timeline Panel as we’ve not created any for this card yet. Also don’t forget for Card #1, to set the 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 position).

You should then have something 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 Card #4 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, add a Scale property 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’s a wrap. Nice work there.

Hopefully by following this tutorial you’ve come to realise how powerful a Prototyping tool Principle is, and with awesome features such as Drivers available to you, you should be more than confident in bringing this great application into your workflow.

Thanks for reading the article,

Marc

Let me know your thoughts...

Your email address will not be published. Required fields are marked *