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.

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.

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.