There’s a reason for that, and it has to do with animation.

Animation within Principle is state based. That means groups and layers move based on their state on each artboard.

In the example, below, the layer demo-shape has no border radius, is colored hex #FA5367 and is located at (70, 500) in State 1 of our animation. In State 2 demo-shape has a border radius of 70, is colored using hex #2B96FE and is located at (190, 270) on the screen.

Between states, it would look something like this.

If you have janky animations it’s probably because your groups/layers weren’t named appropriately before being imported.

Principle is a state-based prototyping tool that uses linear motion to move groups and layers around based on the names you define for your groups/layers, the attributes you apply at each state, and the driver or animation settings you apply to each interaction.

When you import without defining your groups/layers, Principle will define those names for you. This automation leads to naming collisions with your groups/layers between states, which is what causes janky animations.

In order to get the smooth animations you have to make sure your groups/layers are named appropriately and that they’re available on every screen they interact with— including states where those groups/layers might not be visible.

Here’s what’s really happening under the hood of Principle prototypes and why you’ll notice so many layers hanging off the artboard/viewport in my Principle files:

As you can see, the keyboard is available for every state of the application, but it’s only shown in the viewport when it’s needed—same with the ‘Log Out’ button.

If the keyboard and the button weren’t available for each state to use, the program would not recognize their transition and they would come in much more immediate—often feeling abrupt or glitchy.

DOWNLOAD UNANIMATED PRD FILE

DOWNLOAD ANIMATED PRD FILE

Expert Principle 💎

After you get the fundamentals down and conceptually grasp how things move, Principle becomes a game of hacking the senses. There are some really incredible Principle prototypes/animations out there that look beautiful but really aren’t that hard. Ultimately, they’re all done using linear or rotational motion, and creative layering.

Rich Media

One of the more powerful aspects of Principle is that it allows you to embed videos, which a lot of other prototyping softwares do not yet allow.

This can take your prototype to the next level, especially if your product is video focused.

DOWNLOAD SOURCE

Decorative Transitions

Although Principle is not a software that you want to be building in, you can use vector based assets built outside of Principle to create some beautiful effects by hacking the system.

In this demo, vector assets are moving in a linear motion, across the screen. It’s creative animation and layering that make this effect happen.

DOWNLOAD SOURCE

Non-Linear Motion

Non-linear motion is perceptually created through creative layering. The non-linear assets themselves are created in a software that has vector access and then imported to Principle for animation.

Check out Jardson Almeida’s Dribbble for more work

If you open up the asset to this file you’ll see that all of the motion in this prototype is created through linear or rotational animation and the perception of non-linear motion is due to creative layering.

DOWNLOAD SOURCE

Asynchronous Animation

Just like the last few animations, this animation looks a lot more difficult than it is.

Check out more from Mario Šimić on his Dribble

If you actually pull out the asset and play with it, you’ll see that the animation is an incredibly creative skew of your perception through a combination of incredible layering and linear motion timing.

DOWNLOAD SOURCE

Interactive Motion

Motion that involves multiple pieces moving at different speeds and/or in different directions based on user interaction with a single layer/group is typically created using Drivers.

Drivers are a little more in depth than simple state to state animation, but they’re not incredibly difficult to pick up. You can read more about drivers in the Principle Documentation—they have a great tutorial video too.

DOWNLOAD SOURCE

How creative can you get?

I hope the software feels much more approachable now. After getting hands on with Principle for a bit I think you’ll start moving fast very quickly. It’s really understanding and focusing on the fundamentals that will help you the most.

If you have any questions or want to know how something was made, I’d be more than happy to chat more in the comments section or you can ping me directly.

I’d also love to see the work you create!

For more Principle inspiration, check out Principle Repo.

Thanks for reading, and I hope this helps!