How to Create Parallax Effects in Principle

You’re working on a new project, you put together a nice design mockup and you present it to the client. You explain the user experience and how little interactions & movement would work.  But what you’re explaining isn’t having the impact you were hoping for. Why not just show them what it would do? You can do this by creating Parallax effects in Principle!

 

So you respond “Let me put together a demo showing how things would work.” Excellent, that should do the trick. Show them what it will look like in action and get their buy. Now you need to figure out how to make it. Do you have a developer make it? Nah, that’s not fast enough, and they’re probably in the middle of something.

 

That’s exactly where we found ourselves on a new project. Images on the site would move depending on mouse position aka Parallax effect, but without the movement it fell short in our presentation. So we hopped in to Principle and cooked up a demonstration and now you can too! *working file included at bottom*

 

This is what we wanted to demonstrate to the client, pretty cool huh?

Parallax Effects in Principle

 

Here’s How We Made It

1. Make Your Design in Principle

Create a new artboard in Principle based on the size of the element you want to animate. Start to recreate your design on this artboard. I typically copy-paste individual elements from either Sketch or Photoshop rather than use the text tool or Sketch Import (sometimes this can get messy if your layers aren’t named properly.)

 

2. Create Triggers

Once you have all your elements in place, use the rectangle tool to create click points, I refer to them as triggers. You’ll need a trigger for each action you want. For my purposes, I need the image of the house to follow the cursor movement. This means I will need 6 triggers. One for the top left, top right, left, right, bottom left, and bottom right. Name your triggers according to their position. The colors do not matter since they will be invisible. 

 

How To Create Parallax Effects in Principle: Step 2 Triggers

 

Now that your triggers are made, we need to hide them so we can see the design. Set the Alpha value, located in Fill, to 0%. You can set the Opacity to 0%, but in some older versions of Principle that will not let you interact with that element in the preview dialog.  If you select them all, you will still see their selection outline.

 

How To Create Parallax Effects in Principle: Step 2 Continued

 

3. Duplicate Your Artboards

Duplicate your original artboard until you have your original + the number of triggers. In my case, there are 6 triggers, plus the original, for a total of 7 artboards. Rename them according to their trigger name and position. Ordering is important, your first/default state needs to be the first artboard in the list or else your starting point will be incorrect in the preview dialog. The additional artboards are named and ordered according to their trigger name.

 

How To Create Parallax Effects in Principle: Step 3 Duplicate Artboards

4. Set Up the Animation States

On each artboard, change the position to correspond with the movement. It helps to look at the inspector to find the original value, that way you can move the image equally from its origin on artboard. In the case of my image, its X Y values are 0,10. I want to move my image 30px on each axis. So, I’ll add or subtract 30 to the values each time.

 

How To Create Parallax Effects in Principle: Step 4 Set Up Animations States

 

Now that you’ve got the starting values, and you know how much you want to move the image, select an artboard and move the image in that direction. For example, in my artboard “Top Left” I want the image to move up 30px and to the left 30px, so I’ll add 30 to X and 30 to Y to get 30px on the X axis and 40px on the Y axis. In the case of bottom right, I subtracted 30px from both X and Y values. Do this for every artboard you have created, except for the first/default position.

 

How To Create Parallax Effects in Principle: Step 4 Continued

 

5. Link Up The Triggers

With all your image positions adjusted on their respective artboards it’s time to link them together based on your interaction. My image needs to move based on cursor positioning, without a click, this means I’ll need my artboard in view to change based on Hover.

 

On your first/default artboard (named “Middle” in my case), select a trigger, and using the small lightning bolt select Hover Inside and link it to the artboard with the same name.

 

How To Create Parallax Effects in Principle: Step 5 Link Up Triggers

  • Trigger Top Left goes to artboard Top Left
  • Trigger Top Right goes to artboard Top Right
  • Trigger Left Goes to Artboard Left
  • …and so on

 

You should end up with with something like this once all the starting triggers are set up.

How To Create Parallax Effects in Principle: Step 5 Continued

 

6. Make It all Loop 

Okay, all the initial triggers are set up. We can freely go from the default image position to the next, but once we hover on a trigger it breaks. We can go from Default to Top Left, but from there we can’t go to Top Right, or Bottom Left etc because those artboards do not have triggers set up. To solve this, we have to link each trigger on each artboard to every other artboard, creating a loop of triggers.

 

Essentially, the 6 triggers on every artboard need to link up how the first artboard links up. This is where things can get a little messy, but if you’ve labeled your artboards and triggers correctly this should be easy.  When it’s all said and done this is what your triggers will look like. Everything is connected.

 

How To Create Parallax Effects in Principle: Step 6

 

As an additional layer of depth, I also moved the background image around by positioning it in a different direction the image is moving on each artboard. So if the image is moving to the bottom right, the background image moves to the top left. As an additional level of polish, you can add easing to each of the arrow transitions. There you have it, now go show off your Parallax effects! *End result at start of post*

 

All Done! Download the source file.

 

2 Comments

  • Echo 5 Aug 23, 2017 2:05 pm

    Great write-up and nice to have something so tangible to present to a client. Does most of your workflow happen in Sketch or is Photoshop still play a large role in your design work?

    • Jeff Gapinski Aug 23, 2017 3:31 pm

      Thanks for the kind words! Our workflow for prototyping at this point is 100% sketch.We interchange InVision App & Principle depending on what we're trying to communicate to the client. InVision typically does most of our heavy lifting where-as Principle helps us nail down the experiential bits more effectively.

Leave a Reply

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