{"id":26798,"date":"2019-07-17T23:01:18","date_gmt":"2019-07-17T15:01:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26798"},"modified":"2023-05-04T22:06:40","modified_gmt":"2023-05-04T14:06:40","slug":"ux-motion-designer-freebies","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/","title":{"rendered":"20 Freebies for Aspiring UX Motion Designers"},"content":{"rendered":"<p>Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups <strong>rely on motion<\/strong> with animated effects to define <strong>how an interface should respond to user input<\/strong>.<\/p>\n<p>Most UX designers learn to use software to create these animations. The two most popular choices are <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.adobe.com\/products\/aftereffects.html\">Adobe After Effects<\/a> and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/principleformac.com\/\">Principle<\/a> (macOS). You can <strong>design interface mockups<\/strong> in a program like Photoshop, and move the UIs into these programs <strong>for animation<\/strong>.<\/p>\n<p>If you\u2019re 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.<\/p>\n<p>Below you\u2019ll find the best freebies for Principle and AE users just <strong>getting into UX motion design<\/strong>. They will surely help you understand <strong>how UX animation works<\/strong>, and how to construct your own.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/ux-design-techniques\/\" class=\"ref-block__link\" title=\"Read More: Four UX Design Strategies to Boost User Engagement\" rel=\"bookmark\"><span class=\"screen-reader-text\">Four UX Design Strategies to Boost User Engagement<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/ux-design-techniques.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-25564 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/ux-design-techniques.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Four UX Design Strategies to Boost User Engagement<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tKeeping users engaged on a website isn\u2019t solely about faster code or more attractive visuals. Even simple designs,...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1464790--AEP-Delete-Action\">Delete Action<\/a><\/h3>\n<p><strong>Swiping<\/strong> is a very common action in mobile apps for various purposes. The default iOS swipe action is used to <strong>display alternate options for editing\/deleting items<\/strong>, and that\u2019s exactly what you get in this freebie created by Ramil Derogongun.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1464790--AEP-Delete-Action\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/delete-action.gif\" alt=\"delete aep action\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>You can download the free AEP file for After Effects, and try it out yourself. The UI follows a <strong>very basic wireframe scheme<\/strong> with user input displayed as a blue dot. These types of user behaviors are the best to be shown <strong>through animation<\/strong> because it gives developers a chance to see <strong>how the interface should work<\/strong>.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2247898-Swipe-Principle-share\">Widget Swipe<\/a><\/h3>\n<p>Here\u2019s another swipe animated mockup that focuses <strong>on cart items in a slideshow<\/strong>. Designed by Leon Wu, this free swipe animation comes with a PRD file which is made for Principle.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2247898-Swipe-Principle-share\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/widget.gif\" alt=\"widget card swipe\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>The animation is extremely simple, and demonstrates how items should move on the screen <strong>when pressure is applied<\/strong>. You also get a feel for the <strong>easing effect<\/strong> whenever the swipe action is released.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2615748-Dualshock4-Sketch-Principle-Freebie\">Dualshock UI<\/a><\/h3>\n<p>Here\u2019s 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.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2615748-Dualshock4-Sketch-Principle-Freebie\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/dualshock4.gif\" alt=\"dualshock ps4 ui app\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>This freebie shows how to create transitions that <strong>swipe between screens<\/strong>. But you also get to see how page elements animate around the screen <strong>in various directions<\/strong>.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2429745-Welcome-screen-Snapster\">Snapster<\/a><\/h3>\n<p>This free mockup is for a mobile app called <strong>Snapster<\/strong>. It focuses <strong>on the welcome\/onboarding screen<\/strong> where users can see demos of the app, and learn how it actually functions.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2429745-Welcome-screen-Snapster\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/snapster.gif\" alt=\"snapster app motion cards\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>It\u2019s a PRD file, and unfortunately this doesn\u2019t play nice with After Effects, so only Principle users can benefit from this one.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2705265-Mobile-Loading-Spinners-Freebie\">Loading Spinners<\/a><\/h3>\n<p>Here\u2019s an AEP After Effects freebie for <strong>mobile loading spinners<\/strong>. These types of animated GIFs became very popular when Ajax made its way into mainstream web development.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2705265-Mobile-Loading-Spinners-Freebie\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/mobile-loading-spinners.gif\" alt=\"loading spinners animation\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>Now these mobile loaders are a dime a dozen, and they can even be <strong>heavily customized<\/strong> 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.<\/p>\n<p>With this freebie you can examine how to animate various thin line icons <strong>into shapes and symbols<\/strong>. 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.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1518192-iPhone-After-Effects-Project-Mockup\">iPhone Mockup<\/a><\/h3>\n<p>While this freebie doesn\u2019t directly contain animation, it\u2019s meant to be used <strong>for production work on iPhone applications<\/strong>. It\u2019s a free iPhone 5S AEP file for use in After Effects as an iPhone template.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1518192-iPhone-After-Effects-Project-Mockup\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/after-effects-iphone-template.jpg\" alt=\"iphone template aep\" width=\"650\" height=\"350\"><\/a><\/figure>\n<p>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.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.uxinmotion.com\/content\/iphone-05\/\">iPhone Template<\/a><\/h3>\n<p>This is another <strong>custom After Effects template<\/strong> with a <strong>more modern iPhone design<\/strong>. The freebie is available from this page at UX in Motion.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.uxinmotion.com\/content\/iphone-05\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/template-iphone.gif\" alt=\"iphone animation template\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>Everything in the template is <strong>super easy to customize<\/strong>. On the download page, you\u2019ll also find a section labeled \"Video Instructions\" where you can learn how to animate the app.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2522985-Micro-Animation-of-Like-Principle-Freebie\">Micro Animation<\/a><\/h3>\n<p>Even the smallest app animations can make a big impact on user experience. This freebie displays a <strong>\"Like\" micro animation<\/strong> whenever a user \"likes\" a post.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2522985-Micro-Animation-of-Like-Principle-Freebie\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/wommielike2.gif\" alt=\"micro animation heart like\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>The heart icon <strong>has its own animation<\/strong> with the user\u2019s profile photo added to the stack of likes. This freebie is only for Principle and you also have a <code>.mov<\/code> file to download if you wish.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2548398-Wallet-Concept-Sketch-Principle-Freebie\">Wallet App<\/a><\/h3>\n<p>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.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2548398-Wallet-Concept-Sketch-Principle-Freebie\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/wallet-concept.gif\" alt=\"wallet concept sketch ux\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>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.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2578890-Accurate-Switcher-Animation-Principle-Freebie\">iOS Switch<\/a><\/h3>\n<p>With Apple\u2019s iOS 7, the world got a freshly designed <a href=\"https:\/\/www.hongkiat.com\/blog\/css-mask-switch\/\">switch for on\/off labels<\/a>. This led to many different effects including a free animation which <strong>mimics the native on\/off switch<\/strong>.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2578890-Accurate-Switcher-Animation-Principle-Freebie\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/switcher-principle-freebie.gif\" alt=\"ios on off switch animation\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>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.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2630030-Ritter-App-Sketch-Principle-Freebie\">Ritter App<\/a><\/h3>\n<p>Here\u2019s 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.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2630030-Ritter-App-Sketch-Principle-Freebie\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/ritterapp.gif\" alt=\"mobile app ui ux\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>You\u2019ll get <strong>a lot of different animations<\/strong> 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.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2493054-Invite-Friends-Material-Design-FREEBIE\">Invite Friends<\/a><\/h3>\n<p>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.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2493054-Invite-Friends-Material-Design-FREEBIE\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/invite-friends.gif\" alt=\"invite friends mobile ux animation\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>Everything was designed in Sketch, and imported to Principle for animation. You get both files as freebies to download and toy around with.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2485140-Card-Swipe-Principle-for-Mac\">Card Swipe<\/a><\/h3>\n<p>Here\u2019s another general swiping freebie made only for Principle users. This is a <strong>card swipe interface<\/strong> created for general purpose slideshows or native app UIs.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2485140-Card-Swipe-Principle-for-Mac\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/card-swipe.gif\" alt=\"card swipe animation principle\" width=\"400\" height=\"300\"><\/a><\/figure>\n<p>I think this is the perfect freebie for a beginner who\u2019s just getting into Principle. It\u2019s not so complicated that you\u2019ll feel lost, yet it\u2019s not so simple that you\u2019ll feel trivialized.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2348538-Chat-On-Map-Freebie-psd-and-principle\">Chat on Map<\/a><\/h3>\n<p>Many designers still use Photoshop for interfaces, and it\u2019s also true of this map chat freebie. You can download a PSD file for the interface, and a PRD file for the Principle animation.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2348538-Chat-On-Map-Freebie-psd-and-principle\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/chat-on-map.gif\" alt=\"maps chat ui animation\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>It\u2019s a surprisingly tame animation for the style, but it still looks great and functions exactly as you\u2019d expect in a simple maps\/geolocation app.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2473606-Promocodez-Loading-Animation-Freebie-Android-App\">App Loading<\/a><\/h3>\n<p>Mobile apps often use <strong>loading screens<\/strong> to tell visitors that something\u2019s happening in the backend. One of my favorite freebies in this collection is this loading animation created by Roman Wagner.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2473606-Promocodez-Loading-Animation-Freebie-Android-App\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/promocodez-animation.gif\" alt=\"promo codez loading screen\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>It loads individual elements <strong>one after another<\/strong> once the loading screen has finished. This animation is very smooth, and completely credible in the realm of mobile app design.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2741841-Onboarding-Cards\">Onboarding Cards<\/a><\/h3>\n<p><strong>User onboarding<\/strong> is a crucial step for every new mobile application. It\u2019s always nice to include some animations at this stage, that\u2019s why these onboarding card animations can be very helpful to app designers.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2741841-Onboarding-Cards\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/onboarding.gif\" alt=\"onboarding cards mobile app\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>This was created by Austin Baird, and released for free to be used on any UI\/UX project.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2665903-12-Hints-on-How-to-Use-Principle-Like-a-Pro-Freebie\">Principle Demos<\/a><\/h3>\n<p>As you delve further into Principle, you\u2019ll learn a lot of advanced workflow techniques. One of the best freebies to go further is <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2665903-12-Hints-on-How-to-Use-Principle-Like-a-Pro-Freebie\">this one<\/a> created for the Yalantis creative team.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2665903-12-Hints-on-How-to-Use-Principle-Like-a-Pro-Freebie\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/low-2.gif\" alt=\"principle freebie pro tricks\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>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.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1988647--AEP-Daily-Animations-03\">Dropdown Menus<\/a><\/h3>\n<p>Menu dropdowns often employ crazy animations to capture our attention. This After Effects freebie uses a <strong>dropdown stairs animation<\/strong> on the menu for individual elements to make them drop like stairs.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1988647--AEP-Daily-Animations-03\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/03-menu.gif\" alt=\"aep dropdown mobile nav ui\" width=\"800\" height=\"600\"><\/a><\/figure>\n<p>This may not be useful for everyone but it\u2019s certainly a great way to learn about After Effects interface animation.<\/p>\n<h3>Final Words<\/h3>\n<p>All of these resources are completely free to download and toy with in your own projects. If you\u2019re brand new to UX animation I guarantee you\u2019ll learn a lot by studying these freebies. If you know any other great resources feel free to drop links in the comments.<\/p>","protected":false},"excerpt":{"rendered":"<p>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&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[3573,3294,510],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Freebies for Aspiring UX Motion Designers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Freebies for Aspiring UX Motion Designers\" \/>\n<meta property=\"og:description\" content=\"Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-17T15:01:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-04T14:06:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/delete-action.gif\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"20 Freebies for Aspiring UX Motion Designers\",\"datePublished\":\"2019-07-17T15:01:18+00:00\",\"dateModified\":\"2023-05-04T14:06:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/\"},\"wordCount\":1397,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-motion-designer-freebies\\\/delete-action.gif\",\"keywords\":[\"user experience\",\"Web Design Freebies\",\"Web Designers\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/\",\"name\":\"20 Freebies for Aspiring UX Motion Designers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-motion-designer-freebies\\\/delete-action.gif\",\"datePublished\":\"2019-07-17T15:01:18+00:00\",\"dateModified\":\"2023-05-04T14:06:40+00:00\",\"description\":\"Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-motion-designer-freebies\\\/delete-action.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ux-motion-designer-freebies\\\/delete-action.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ux-motion-designer-freebies\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Freebies for Aspiring UX Motion Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Freebies for Aspiring UX Motion Designers - Hongkiat","description":"Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/","og_locale":"en_US","og_type":"article","og_title":"20 Freebies for Aspiring UX Motion Designers","og_description":"Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with","og_url":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-17T15:01:18+00:00","article_modified_time":"2023-05-04T14:06:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/delete-action.gif","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"20 Freebies for Aspiring UX Motion Designers","datePublished":"2019-07-17T15:01:18+00:00","dateModified":"2023-05-04T14:06:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/"},"wordCount":1397,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/delete-action.gif","keywords":["user experience","Web Design Freebies","Web Designers"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/","url":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/","name":"20 Freebies for Aspiring UX Motion Designers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/delete-action.gif","datePublished":"2019-07-17T15:01:18+00:00","dateModified":"2023-05-04T14:06:40+00:00","description":"Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These UX mockups rely on motion with","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/delete-action.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/ux-motion-designer-freebies\/delete-action.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ux-motion-designer-freebies\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Freebies for Aspiring UX Motion Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Ye","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26798"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26798\/revisions"}],"predecessor-version":[{"id":66834,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26798\/revisions\/66834"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26798"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}