20 Freebies for Aspiring UX Motion Designers

Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with animated effects to define how an interface should respond to user input.

Most UX designers learn to use software to create these animations. The two most popular choices are Adobe After Effects and Principle (OS X only). You can design interface mockups in a program like Photoshop, and move the UIs into these programs for animation.

If you’re interested to learn UX animation, then freebies will be a tremendous asset. You can study the work of others, and play with their designs to see how it all works.

Below you’ll find the best freebies for Principle and AE users just getting into UX motion design. They will surely help you understand how UX animation works, and how to construct your own.

Read more: 4 UX design techniques to encourage user engagement

Delete Action

Swiping is a very common action in mobile apps for various purposes. The default iOS swipe action is used to display alternate options for editing/deleting items, and that’s exactly what you get in this freebie created by Ramil Derogongun.

You can download the free AEP file for After Effects, and try it out yourself. The UI follows a very basic wireframe scheme with user input displayed as a blue dot. These types of user behaviors are the best to be shown through animation because it gives developers a chance to see how the interface should work.

Widget Swipe

Here’s another swipe animated mockup that focuses on cart items in a slideshow. Designed by Leon Wu, this free swipe animation comes with a PRD file which is made for Principle.

The animation is extremely simple, and demonstrates how items should move on the screen when pressure is applied. You also get a feel for the easing effect whenever the swipe action is released.

Dualshock UI

Here’s an incredibly dynamic UX animation effect shared by Alexander Boychenko. This mockup is based on the PlayStation Controller for a mobile app UI. It includes a Sketch and Principle file you can download for free.

This freebie shows how to create transitions that swipe between screens. But you also get to see how page elements animate around the screen in various directions.

Hamburger Menu Animation

Hamburger icons are still all the rage in mobile interfaces. This menu icon freebie demonstrates how to animate the three-bar icon into an "X" icon.

It’s a repeating animation, so the "X" also animates back into a hamburger menu icon. This is a great freebie to learn about vector manipulation for UI elements.

Snapster

This free mockup is for a mobile app called Snapster. It focuses on the welcome/onboarding screen where users can see demos of the app, and learn how it actually functions.

It’s a PRD file, and unfortunately this doesn’t play nice with After Effects, so only Principle users can benefit from this one.

Loading Spinners

Here’s an AEP After Effects freebie for mobile loading spinners. These types of animated GIFs became very popular when Ajax made its way into mainstream web development.

Now these mobile loaders are a dime a dozen, and they can even be heavily customized to fit certain interfaces. This freebie comes with an AEP file and a Sketch file to edit the vectors if you want to modify them.

With this freebie you can examine how to animate various thin line icons into shapes and symbols. Once you learn the program, it becomes a lot easier to do this type of stuff, so it helps to have freebies at your disposal for research.

iPhone Mockup

While this freebie doesn’t directly contain animation, it’s meant to be used for production work on iPhone applications. It’s a free iPhone 5S AEP file for use in After Effects as an iPhone template.

Simply import your interface mockup, and create the animations in After Effects. Then you can plug it into this iPhone mockup to share with your team.

iPhone Template

This is another custom After Effects template with a more modern iPhone design. The freebie is available from this page at UX in Motion.

Everything in the template is super easy to customize. On the download page, you’ll also find a section labeled "Video Instructions" where you can learn how to animate the app.

Micro Animation

Even the smallest app animations can make a big impact on user experience. This freebie displays a "Like" micro animation whenever a user "likes" a post.

The heart icon has its own animation with the user’s profile photo added to the stack of likes. This freebie is only for Principle and you also have a .mov file to download if you wish.

Wallet App

Digital wallets are becoming much more popular, and this freebie makes it easier to design one. You get a Sketch file with all the raw vector elements, plus a free PRD file for Principle animation.

This freebie was designed by Sergey Bykov as a fun little side project. But it can be very educational if you take it apart, and work with the animation step-by-step.

iOS Switch

With Apple’s iOS 7, the world got a freshly designed switch for on/off labels. This led to many different effects including a free animation which mimics the native on/off switch.

In this file, you get a very simple animation effect with a basic easing. The switch moves over, and the background turns green, then reverts back when the switch is turned off.

Ritter App

Here’s another great freebie released by Sergey Bykov for what he calls the Ritter App. This includes a free Sketch file for the vector interface, along with a free PRD file for the Principle animation.

You’ll get a lot of different animations in this freebie, so I think it would be more useful to an intermediate-to-advanced designer. Beginners can learn a lot from it as well, but may have a steep learning curve.

Invite Friends

We all know and love the plus icon flyout menu of Google. Well, Jardson Almeida created a Friends Invite menu based on a simple Material Design concept.

Everything was designed in Sketch, and imported to Principle for animation. You get both files as freebies to download and toy around with.

Card Swipe

Here’s another general swiping freebie made only for Principle users. This is a card swipe interface created for general purpose slideshows or native app UIs.

I think this is the perfect freebie for a beginner who’s just getting into Principle. It’s not so complicated that you’ll feel lost, yet it’s not so simple that you’ll feel trivialized.

Chat on Map

Many designers still use Photoshop for interfaces, and it’s also true of this map chat freebie. You can download a PSD file for the interface, and a PRD file for the Principle animation.

It’s a surprisingly tame animation for the style, but it still looks great and functions exactly as you’d expect in a simple maps/geolocation app.

App Loading

Mobile apps often use loading screens to tell visitors that something’s happening in the backend. One of my favorite freebies in this collection is this loading animation created by Roman Wagner.

It loads individual elements one after another once the loading screen has finished. This animation is very smooth, and completely credible in the realm of mobile app design.

Onboarding Cards

User onboarding is a crucial step for every new mobile application. It’s always nice to include some animations at this stage, that’s why these onboarding card animations can be very helpful to app designers.

This was created by Austin Baird, and released for free to be used on any UI/UX project.

Principle Demos

As you delve further into Principle, you’ll learn a lot of advanced workflow techniques. One of the best freebies to go further is this one created for the Yalantis creative team.

This is a completely free resource for Principle users to download and play with. It covers a few tricks showing how to become a pro at Principle animation.

Dropdown Menus

Menu dropdowns often employ crazy animations to capture our attention. This After Effects freebie uses a dropdown stairs animation on the menu for individual elements to make them drop like stairs.

This may not be useful for everyone but it’s certainly a great way to learn about After Effects interface animation.

Final Words

All of these resources are completely free to download and toy with in your own projects. If you’re brand new to UX animation I guarantee you’ll learn a lot by studying these freebies. If you know any other great resources feel free to drop links in the comments.