Published on <a href="http://ift.tt/2owyfzC">| Prototyping: From UX to Front End &mdash; Medium</a> Ondřej Šraděja <img alt="" src="http://ift.tt/2nKTyk2">
Well, to be honest with you &#8211; there are no anchors in the Principle App. But before you begin to searching the Adobe website for the After Effects pricing, I&#8217;ve got fully working workaround ready for you. And what more &#8211; it really is simple.
<h3>Story behind</h3>
If you just want a step-by-step tutorial, you can skip this section.
Last three days I was solving a pretty simple problem &#8211; I had a perfect idea how a menu in my iOS app concept should work but I was not able to reproduce it in Principle. Why? Well, because Principle doesn&#8217;t support anchors.
What I wanted to do was a “swing” animation, where this menu would swing into the frame from the left side turning itself around one fixed corner.
Don&#8217;t take me bad &#8211; I really love Principle. It is giving me the same pleasant feeling as Sketch does while working with it. But as this app is for Mac only and is pretty young and fresh, there is not that same huge community that Adobe has, means it is not so simple to get an answer for a particular problem. That&#8217;s why I&#8217;m typing this post.
But in the end there is one place where you can ask any question &#8211; Facebook group “Principle”. It is full of capable and willing to help designers (such as Reza who helped me with my problem &#8211; thank you once again), so don&#8217;t hesitate to visit it.
<h3>Step-by-step tutorial for “anchoring”</h3>
Let&#8217;s say that we want to do a swing animation I&#8217;ve described above (but this workaround will work for any type of anchoring, even when you want to anchor whole object).
<img alt="" src="http://ift.tt/2owWjm7">What we expect.
<h4>Content setup</h4>
Ok, so we will need two Artboards. Both will contain 1) green rectangle and 2) blue rectangle.
We will turn the blue one on the Artboard 1 90° counterclockwise and will align it&#8217;s top to the left side of green rectangle.
This may seem as everything we need, right? But if you&#8217;re gonna try to create animation of this setup you will end up with something like this:
<img alt="" src="http://ift.tt/2nKGOtN">Wrong movement caused by default center anchoring.
I made this animation slower so it is more noticeable. Look at the top left corner of the screen. Do you see how it is overlapping?
You can of course solve this by increasing the size of the blue rectangle but in case that green layer contains something that can&#8217;t be covered, you are still in trouble (like the status bar in my case).
<h4>Changing the anchor</h4>
Now we know what&#8217;s happening and we also know that we need to anchor that top left corner. But how to do that?
1. Group layers that should take part in animation
To perform our workaround we need to group moving layers. In our case it is just the blue one. That&#8217;s because we can change the interactive area for groups.
2. Change interactive area
Now we will use interactive are to simulate an anchor. In our case, we will adjust it so it covers only one pixel in the top left corner of both blue layers on both artboards.. Well, top left corner of both groups to be exact as we are changing the interactive area of the group now.
It will look like this:
<img alt="" src="http://ift.tt/2owCBXR">Changing the interactive area.
3. Press play!
Congratulations! You just created desired anchor. As this seems as a pretty small issue, it can block also really complicated animations.
And if I haven&#8217;t described anything clearly, you can of course download source file for this example here: <a href="https://goo.gl/YdA59D">Google Drive</a>
If this post was helpful for you, please hit the heart bellow so more people can profit from it. Thank you.
Stay updated. Follow me. Become my friend.
I&#8217;m continuously adding posts regarding my work to my <a href="http://ift.tt/2nKG5IO">Instagram</a> account. You can find me on <a href="http://twitter.com/sradejaondrej">Twitter</a>. And you can always send me an <a href="mailto:sradeja.ondrej@gmail.com">email</a>.
<iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2lIYHWK">http://ift.tt/2lIYHWK</a></iframe><img src="http://ift.tt/2owG08K" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2nKKjjX">Principle App: how to anchor anything in your animation</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Principle App: how to anchor anything in your animation

Top Stories