A Comprehensive Guide to UI Animation Using Principle and Sketch

Designing a user interface (UI) with motion and transitions in consideration can make a significant difference in the user experience (UX). In the modern era, where most people have short attention spans, micro-interactions that are animated can go a long way towards increasing user engagement. This is why Airbnb has recently released Lottie, a new open-source platform that makes it easier to add animation to native applications.

The increasing importance of incorporating motion as part of the design process to create enhanced user experiences for applications and websites is being demonstrated by projects such as Lottie. This signifies a shift towards using animation as a key factor in the development of user-friendly interfaces.

In this article, you will be given a detailed guide on how to make use of Principle for Mac to create stunning user interface animations. After reading this article, you will be able to take dull and static mockups and turn them into interactive prototypes that will help you to showcase your work in a much more effective way. Furthermore, you will be able to apply the knowledge acquired from here to improve your UI presentations and Dribbble shots.

Let’s begin.

A Summary of the Fundamental Interface

If you are already familiar with the Mac Operating System (OS), you will find that the user interface of Principle is strikingly similar. This interface is divided into three distinct sections: a sidebar which provides access to various tools and functions, a design area which contains the artboards, and a preview window which can be resized and positioned to the user’s preference.

Understanding The Principles Of Basic Animation

Principle animation is an excellent solution for those who are new to animation, as it eliminates the need to have any prior experience in the field. The software handles the majority of the difficult tasks, leaving you to focus on the triggers that initiate an animation, such as a button, hyperlink, or scrolling action, as well as how the animation starts and ends.

Here’s a quick glossary of phrases you’ll encounter throughout the tutorial to help you keep up.

• Component:

  A component can contain an element or an animation and is essentially a type of grouping. In Adobe Photoshop, a component is the same as a “smart object,” while in Adobe Illustrator, a component is referred to as a “symbol.

• Trigger

  The initiation of an animation can be achieved through a variety of user actions, including tapping, scrolling, and hovering. In order to create a trigger within Principle, simply select any element and click the lightning bolt symbol that appears on the right-hand side.

• Transformation:

  the act of sliding left or right to alter the condition of one artboard from another.

• Effect of easing:

  a transition’s degree of smoothness is determined by how the animation begins and finishes.

A. Trigger and Transformation

In order to animate using Principle, the first step is to add a trigger to an element, such as a button or link, and adjust the initial and final states of the element, including changes in position or scale throughout the animation.

1. Define an initial state:

   how your UI components appear before the animation begins.

2. Define the trigger:

   choose the interaction element and the action that will initiate the animation.

3. Define the final state:

   how the components will be shown at the conclusion of the animation.

Once the animation is configured, you can get a preview of it in the preview window.

B. Length Of Animation And Effect Of Easing

By following these three simple steps, you can easily modify the duration and “easing” effect of the animation in Principle. The default animation length is half a second, which may not be long enough to fully appreciate the transition impact. With these modifications, you can optimise the animation to better suit the needs of your project.

1. Open the Animation Panel:

   Select the black arrows that connect two artboards and then click the “Animate” button in the top bar.

2. Extend the animation length

   Move the blue lines’ ends.

3. Apply Easing:

   To smooth out the transitions, select all of the diamond-shaped spots and choose “Ease Both” from the dropdown menu.

What You Can Expect

By using the example application, you can select a colour to view Google’s Material Design colour palette and gain additional information. Additionally, you will have the opportunity to design a menu slider, several page transitions with a fluid parallax effect, and a loading animation.

Developing a Concept File into a Principle

1. Prior to animating, ensure that the artboards are configured to enable smooth transitions. For instance, if a screen is to transition in from the right, the right edge of the artboard should be contacting the right edge of the screen it is replacing during the animation.
2. Once your Sketch file is ready, open Principle, create a new project with the 360×640 ratio, and then click the “Import” option.

Screen headers are removed to allow for seamless scrolling

In order to ensure a seamless experience when navigating between different pages of the app, it is recommended to keep only the initial header. The headers were originally incorporated to showcase the look and feel of the app. This header will be visible exclusively on the “Welcome” page and will be implemented as a static bar that includes the menu and the title of the application.

Making The Shapes For The Loading Animation

1. Once you have selected the loading shapes group, click the “Create Component” button to generate a component containing the loading shapes and text. We will then create a Component for the text contained within the first symbol and animate it separately.
2. Simply choose the grouped forms. To replicate an artboard, choose the “Tap” trigger and drag-and-drop it on top of the original.
3. The second artboard displays the animation in its completed state, and the group may be rotated using the angle attribute. To create a more captivating effect, assign distinct angle values to the “fill” and “outline” elements.
4. To change the time to approximately 1.00 seconds, select the arrows between artboards, select the “Animate” option to open the “Animation Panel,” and then adjust the end points to the desired value.

Making The Text For The Loading Animation

1. Begin by creating the slide-up animation. Next, select the button form and apply the “Tap” trigger event to it. Finally, adjust all of the screens on the new artboard by 640 pixels, which is the same height as the current artboard.
2. We should begin our process by creating the parallax effect. To do this, we need to return to the previous artboard and modify the Y values of the text and geometric elements on the welcome screen.
3. Finally, increase the timeframe within the animation panel to one second. After selecting all of the diamond-shaped points, apply the “Ease Both” effect to the timeline by clicking on any blue line.
4. Move the shapes around in the animation preview until you think the parallax effect looks nice.

Welcome Page for The Parallax Effect

1. Drag an arrow from the loading component to any location on the artboard to apply the “Tap” trigger after choosing it.
2. Select every screen (in the master group), then raise it by 640 pixels. This action displays the Welcome screen.
3. Revert to the previous artboard and reposition the shapes associated with the “Welcome” screen downward to create a parallax effect, which is an asynchronous sliding effect.
4. To extend the duration of the animation, one can drag the endpoints of the blue lines to approximately one second after selecting the arrow between the artboards in the animation panel.

Parallax Effect Creation – About Page

1. To apply the “Tap” trigger, first select the entire group that contains the down-arrow button. Afterward, drag an arrow from the down-arrow button to any desired location on the artboard. Make sure to select the entire group before initiating the drag.
2. Choose every screen (from the master group) and raise it all by 640 pixels. The About screen appears after completing this step.
3. Return to the previous artboard and adjust the positioning of the shapes associated with the “About” screen to a lower location. Doing so will create a parallax effect, which is an animation that displays a distinct sliding motion.

Colours Page: Creating The Parallax Effect

1. Create a new artboard by applying the “Tap” trigger to the down arrow button (be careful to pick the complete group first).
2. Select every screen on the new artboard, then raise it by 640 pixels.
3. In order to achieve a more dynamic effect, it is recommended to reduce the colours and text of the artboard that has already been created. Additionally, it is important to incorporate a variety of locations when making adjustments; the lower an item is placed, the slower it will take for it to move back up.
4. The animation should then be extended, and all blue timelines within the animation panel should have a “ease both” applied to them.

Choosing a Colour Page by Sliding A Page From The Side

1. The “Load More” button on the “Colours” screen should have a “Tap” trigger applied to it.
2. Move the “Colours” and “Selection” content by 360 pixels to the left on the new artboard (artboard width)
3. Return to the prior artboard and reposition the screen content so that it faces the right instead of the left.
4. Keep in mind that you may also animate the screen’s opacity as it slides in from 0% to 100%.
5. To adjust the transition effect, experiment with the animation length and easing effect.

Menu Icon Animation

1. It is important to be aware that each layer and shape included in the original Sketch file which has an effect (e.g. shadows) will be imported into Principle as an image. To make any modifications to the shapes within Principle, it is advisable to wait until after the import process has been completed before applying any special effects.
2. In order to create a hamburger menu icon, begin by drawing three thin rectangles, then join them together using the existing symbol as a guide. Once this is complete, you can then remove or hide the original menu icon.
3. Apply a “tap” trigger to the freshly constructed icon by selecting it.
4. Rotate the top and bottom rectangles on the menu icon on the new artboard, centre them, and give the middle rectangle 0% opacity.
5. Test the connection between the modified menu icon and the preview artboard using the “Tap” trigger to see the animation you just made.

The Menu Slider Effect: How To Create It

1. Move the screens to the right on the end-state artboard until the menu links are positioned to the left of the closing menu symbol.
2. Except for the text in the menu and the light-grey background, select all the elements in the “Colours” folder and reduce the opacity to 25%. During the animation, the website content will gradually become less visible in order to allow the menu to take centre stage.
3. To produce a seamless impression, extend the animation’s length and return to the earlier artboard where you may gently reposition the menu items.

Towards The Contact Screen now

1. Apply a “Tap” trigger to the “Contact Us” button on the open menu.
2. Move all of the screens upward by 640 pixels on the freshly generated artboard.
3. Return to the previews artboard and reassign the components from the “Form” page to the bottom.
4. To produce the parallax effect, move the items at various Y values.
5. Last but not least, choose the arrows connecting the artboards, lengthen the animation, and then give the blue timelines “Ease Both.”

Finally, a Thank You page

1. On the “send message” button, apply a “Tap” trigger.
2. The displays should all be moved up 640 pixels on the new artboard.
3. After that, slide the components from the “Confirmation” page downward on the previews artboard.
4. To get a more dynamic appearance, experiment with the coloured icon’s size and rotation.
5. To better understand the transition impact, be sure to lengthen the animation.

The Ease with Which Animations Can Be Added Using Principle

Principle is an excellent tool for bringing your UI interaction concepts to life.

The program’s user interface has been optimised for use with Sketch files, and it’s compatible with Mac computers.

The vast majority of animation and transition effects can be automated using Principle. All that is required is the addition of a trigger to a form on one artboard and the updating of any attribute on the final artboard for the components that need to be animated. This will ensure the desired animation and transition effects will be achieved.

If you have any queries, you may post them here. Feel free to ask me anything!