{"id":18271,"date":"2019-11-04T14:30:55","date_gmt":"2019-11-04T14:30:55","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=18271"},"modified":"2020-09-03T11:23:02","modified_gmt":"2020-09-03T10:23:02","slug":"100-days-motion-design","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/","title":{"rendered":"How I taught myself to create 50 pieces of animation in 100 days"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It was a summer night in Seattle. I ate some ice-cream, watched a Youtube tutorial, and downloaded a free trial of Principle. Several months later, I completed my 5th 100-day-project \u2014 100 Days of Motion.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/13_kKCF98Ili-FN1QyOu30w.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/13_kKCF98Ili-FN1QyOu30w.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I started my first 100-day-project back in 2015. My past projects include 100 Days of Doodle, 100 Days of Lettering, 100 Days of Watercolor, and 100 Days of Vector Illustration.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Tw0bHzYV8NQ8FzJh0caoLg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Tw0bHzYV8NQ8FzJh0caoLg.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">My Past 100-Day-Projects<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For me, 100-day-project is a creative outlet. It allows me to express myself through art. The joy of creation and the challenge of learning a new craft always keeps me coming back for more.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In 100 Days of Motion Design, I taught myself to animate and created 50 pieces of vector-based animation in 100 days. You can find all of them on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.instagram.com\/explore\/tags\/100daysofmotionbytx\/\">Instagram<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/tiantianxu\/tags\/100daysofmotion\">Dribbble<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here is my creative process, the tools I used, and a reflection on the project.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tools<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Sketch + Principle<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">During the first two weeks, I illustrated in Sketch and then imported it into Principle for animation.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.sketchapp.com\/\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sketch<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">:<\/strong> A lightweight vector editing tool that is intuitive and affordable. I find it a handy tool to create simple illustrations.<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/principleformac.com\/\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Principle<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">:<\/strong> A lightweight prototyping tool that generates interactive animation. It works with Sketch seamlessly. I find it a good tool for beginners to learn animation properties and the timeline concept.<\/li>\n<\/ul>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Illustrator + After Effects<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After the first two weeks, I switched to Illustrator and After Effects for more advanced control.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.adobe.com\/products\/illustrator.html?sdid=KKQML&amp;mv=search&amp;s_kwcid=AL!3085!3!227016237331!e!!g!!illustrator&amp;ef_id=WNC7nwAAAKHjtx@A:20180807020959:s\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Illustrator<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">:<\/strong> The most powerful vector editing tool. The illustration created in Illustrator can be imported into After Effects seamlessly.<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.adobe.com\/products\/aftereffects.html\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After Effects<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">:<\/strong> The most powerful animation tool. It has a steep learning curve. Throughout the project, I have learned to use many of its advanced controls and built-in visual effects.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Creative Process<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Creating an animation is time-consuming. I broke the creative process down into four steps and aimed to complete them in two days.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Step 1: Look for inspiration (15 mins)<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I collect motion design inspiration from Dribbble, Behance, and Instagram on a daily basis. My <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.pinterest.com\/tiantianxu\/ui-motion\/\">growing Pinterest board<\/a> has been my go-to place for inspiration.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I also collect motion design tutorials on Youtube. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.youtube.com\/playlist?list=PL2qWmlVFdcGNrUdd-agegZo-7GFBmgKOu\">Here is a list of tutorials<\/a> I have used throughout my 100-day-project.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Step 2: Sketch ideas (5 mins)<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once I had an idea, I sketched its key movements on my notebook.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Um8uWFp_Zzs43LaOH34E8w.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Um8uWFp_Zzs43LaOH34E8w.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">Sketch Ideas<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Step 3: Create illustration (40 mins)<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created the illustration and imported it into Principle or After Effects. Keeping the design file well-organized can significantly speed up the importation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/yPha_s7W-0M\">This tutorial<\/a> shows how to prepare and import an Illustrator file into After Effects. Alternatively, the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/google.github.io\/sketch2ae\/\">Sketch2AE<\/a> plugin can import Sketch layers into After Effects.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Step 4: Create animation (60 mins)<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I animated the illustration and exported the final animation as a short video. I posted the video to Instagram with the hashtag #100daysofmotionbytx<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/jHpk1JS44yE\">This tutorial<\/a> shows how to export a video to GIF if you want to post animations to Dribbble.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Day 1\u201314: Start with the\u00a0basics<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created my first animation by watching <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/qYCPoqwmQK4\">Principle\u2014Simple Character Animation (Jumping Donut<\/a>).<a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1qxVO9pb3XK8Ua7xW03zF3w.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1qxVO9pb3XK8Ua7xW03zF3w.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion\u2014Jumping Donut<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created an interactive prototype by following <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/iS3B5VT7Ejc\">Principle \u2014 Avatar Animation Using Scroll Gestures<\/a>.<img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1SftV3wzCVX5Ot9XgjNJa4w.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1SftV3wzCVX5Ot9XgjNJa4w.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion \u2014 Jake and Pizza<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Soon enough, I was able to create animation in Principle without following tutorials.<img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Oy-wi4cAOp5s-8-SvhoQqw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Oy-wi4cAOp5s-8-SvhoQqw.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion\u2014Day\/Night Toggle<a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1liFYaveAeSToocbX9RxPLw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1liFYaveAeSToocbX9RxPLw.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion\u2014Solar Eclipse<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Day 15\u201370: Climb the learning\u00a0curve<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">During day 15\u201370, I developed the following methods to climb the learning curve of After Effects.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Method 1: Watch tutorial and create from memory<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I watched the video tutorial in 1.5x speed and tried to create the animation from memory.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When necessary I wrote down the key steps and only revisited the tutorial if I felt stuck. I also made an effort to memorize the common After Effects shortcuts to help speed up the process.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created the smoke effect after watching <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/mYf1wElfPn4\">Smoke Animation \u2014 After Effects Tutorial<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><img class=\"aligncenter size-full wp-image-6580\" title=\"\" alt=\"\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1M91MIdQGKJ4-EnOjkqll6A.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1M91MIdQGKJ4-EnOjkqll6A.gif\" title=\"\" alt=\"\" \/><\/a>100 Days of Motion\u2014Epicurrence<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created the lava lamp after watching <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/iC3mLtDVjlc\">After Effects Tutorial \u2014 Lava Lamp<\/a>.<a><br \/>\n<img class=\"size-full\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1pXTxwo53f0w1sLufOOT6RA.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1pXTxwo53f0w1sLufOOT6RA.gif\" \/><\/a>100 Days of Motion\u2014Lava Lamp<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Method 2: Rebound other people\u2019s work<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I studied other people\u2019s work on Dribbble frame by frame and then came up with my own idea.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: left;\">I rebounded <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/2542570-Bouncy-Fruits\">Bouncy Fruits<\/a> by Deekay. I deconstructed his work to study the \u201cSquash and Stretch\u201d animation principle.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><br \/>\n<\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1smPzqyHsAoGBMU6YFpKlQQ.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1smPzqyHsAoGBMU6YFpKlQQ.gif\" \/><\/a>100 Days of Motion \u2014 Bouncy Desserts<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I rebounded <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/3631324-Walk-Cycle-Tutorial\">Ducky Walk Cycle<\/a> by Tony Babel. His tutorial <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/PgBo-00_GWc\">After Effects\u2014Walk Cycle Tutorial<\/a> taught me how to animate walk cycles. (The character was inspired by a doodle from <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.flickr.com\/photos\/skinnyandy\/\">Skinny Andy<\/a>.)<a><br \/>\n<img class=\"size-full\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/17RcOznQuK8dh8Nl0IFb0MA.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/17RcOznQuK8dh8Nl0IFb0MA.gif\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion \u2014 Mr. Teacup<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Method 3: Re-apply learned skills intentionally<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Repetition is the key to reinforce a newly learned skill. I intentionally re-applied the skills I learned to create new animation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created the bouncy pumpkin by re-applying the \u201cSquash and Stretch\u201d animation principle.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1IEZP_HYSBxuhzIeX9GGzaQ.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1IEZP_HYSBxuhzIeX9GGzaQ.gif\" \/><\/a>100 Days of Motion\u2014Pumpkin<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I re-applied what I learned from Tony\u2019s walk cycle tutorial to a flamingo.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1bnS6RVSCdvPgoQQ-DPOCBw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1bnS6RVSCdvPgoQQ-DPOCBw.gif\" \/><\/a>100 Days of Motion\u2014Flamingo<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Method 4: Read book to connect the dots<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Halfway through the 100-day-project, I took a day to read. I was able to connect the dots by revisiting the learned skills in a more systematic way. I also discovered new techniques that I wanted to try.<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.amazon.com\/Adobe-After-Effects-Classroom-release\/dp\/0134853253\/ref=pd_lpo_sbs_14_t_0?_encoding=UTF8&amp;psc=1&amp;refRID=BPGEAWD0RMT4VRVJS98N\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Adobe After Effects CC Classroom in a Book (2018 release)<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Creative professionals seeking the fastest, easiest, most comprehensive way to learn Adobe After Effects CC.<\/span><\/span><\/a><\/section>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Day 71\u2013100: Create from the heart<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once I became comfortable with the tools, I created animation from my heart.<br \/>\nSome of my work was inspired by my favorite games and movies.<br \/>\n<a><img class=\"size-full\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Ua9x4_3mXmzs-dYsZAC9qg.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Ua9x4_3mXmzs-dYsZAC9qg.gif\" \/><\/a>100 Days of Motion\u2014Watchtower (Inspired by video game <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.firewatchgame.com\/\">Firewatch<\/a>)<a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1yNhg9zxYS67B6-6uk9Qf-w.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1yNhg9zxYS67B6-6uk9Qf-w.gif\" \/><\/a>100 Days of Motion\u2014Crow People (Inspired by mobile game <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.monumentvalleygame.com\/mv1\">Monument Valley<\/a>)<a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1flMp9MrA7AdR8CaXfkOd8A.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1flMp9MrA7AdR8CaXfkOd8A.gif\" \/><\/a>100 Days of Motion\u2014Enchanted Rose (Inspired by movie Beauty and the Beast)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some of my work was inspired by other people\u2019s illustrations.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><img class=\"size-full\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1FKtUlAKHCBjTftUFUgsnew.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1FKtUlAKHCBjTftUFUgsnew.gif\" \/><\/a><span style=\"background-color: #ffffff; color: #333333;\">100 Days of Motion\u2014Lighthouse (Rebound of <\/span><a class=\"link link--blue fontWeight-4\"style=\"background-color: #ffffff;\" href=\"https:\/\/dribbble.com\/shots\/2668179-Lighthouse\">Paulius\u2019 Lighthouse<\/a><span style=\"background-color: #ffffff; color: #333333;\">)<\/span><a><br \/>\n<img class=\"aligncenter size-full wp-image-6580\" \/><\/a><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/18TBjfb5U9s8cs4DH8hptzA.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/18TBjfb5U9s8cs4DH8hptzA.gif\" \/><\/a>100 Days of Motion\u2014Underwater (Rebound of <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/2128057-Whale-Migration\">Dave Chenell\u2019s Whale Migration<\/a>)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: left;\">Below was my submission to the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.uplabs.com\/posts\/day-83-84-carousel-loader\">Uplab loader design challenge<\/a>. It pushed me out of my comfort zone and motivated me to learn new techniques.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><br \/>\n<\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1AEaPHQDq1i1UcXnPxUi3QQ.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1AEaPHQDq1i1UcXnPxUi3QQ.gif\" \/><\/a>100 Days of Motion\u2014Carousel<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created artwork to promote <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.typethursday.org\/seattle\/\">Type Thursday Seattle<\/a> \u2014 a monthly design meetup that discusses work-in-progress projects that focus on letterforms.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1xd6pAKWoP23E9JsTcPlt6g.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1xd6pAKWoP23E9JsTcPlt6g.gif\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion\u2014Neon Light<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I created animation for places I have been and places I want to go.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><img class=\"size-full\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1NFj2bEDfFiJRnwubuLLqkg.gif\"><br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1NFj2bEDfFiJRnwubuLLqkg.gif\" \/><\/a>100 Days of Motion\u2014Hot Air Balloon<a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1BPWZB7h4dsUVrzgwgVFkEg.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1BPWZB7h4dsUVrzgwgVFkEg.gif\" \/><\/a>100 Days of Motion\u2014Aurora<a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1v8fb77loy38VDxxzruo4BA.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1v8fb77loy38VDxxzruo4BA.gif\" \/><\/a>100 Days of Motion \u2014 Sky Lantern<a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1CDa_QnghSNvWuh_K2KhP6w.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1CDa_QnghSNvWuh_K2KhP6w.gif\" \/><\/a>100 Days of Motion \u2014 Forest (Rebound <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/2940050-Birds\">Mikael Gustafsson\u2019s Birds<\/a>)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">At the end of the 100-day-project, I rebounded the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.instagram.com\/p\/BK-ZYPCB3Q-\/?taken-by=tiantianxu\">Galaxy Girl<\/a> from my 100 Days of Watercolor.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1ivsGDiEXbF218KSsQQuYqw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1ivsGDiEXbF218KSsQQuYqw.gif\" \/><\/a>100 Days of Motion\u2014Galaxy<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Reflecting<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">1. Driven by ideas<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once I had an idea, I was driven to bring it to life. It did not matter what techniques I needed to learn.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, I wanted to express my love for reading. To make my idea of flipping book come true, I found a tutorial <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/yTOEM8bKx_Y\">Open Your Book<\/a> on Youtube and learned how to turn on 3D layer for a 2D object.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/15-v2vsThRNs9Zpbpx3cmuw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/15-v2vsThRNs9Zpbpx3cmuw.gif\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion\u2014Book Flip<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Similarly, I wanted to create a cup of pumpkin spice latte. I found a tutorial <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/youtu.be\/tVP61zaCskI\">Flat 2D Smoke Clouds<\/a> on Youtube and learned how to use slider control and wiggle expression.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1HXNJ5NJQq8UEdpDZTZ_Mig.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1HXNJ5NJQq8UEdpDZTZ_Mig.gif\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\">100 Days of Motion\u2014Pumpkin Spice Latte<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">The idea-driven approach has kept me motivated and pushed me to discover new techniques.<\/p><\/span><\/blockquote>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">2. Stay humble<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I was optimistically confident about my motion design skill at the beginning of the project. My confidence dropped rapidly as I started exploring After Effects \u2014 the huge skill gap made me realize how limited my experience and knowledge in motion design actually was.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Dunning%E2%80%93Kruger_effect\">Dunning-Kruger effect<\/a> describes the cognitive bias in which people of low-ability have illusory superiority and mistakenly assess their ability as greater than it is.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/16lSqrkrj6ghgEdp_KTRexQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/16lSqrkrj6ghgEdp_KTRexQ.png\" \/><\/a>Dunning-Kruger Effect<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The more I became aware of my own incompetence, the humbler I became.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">In order to improve my own craft, I need to stay humble, regardless of how much I thought I already knew.<\/p><\/span><\/blockquote>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">3. Be the 1%<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Before I started the 100-day-project, I spent most of my spare time consuming content: social media, Netflix\u2026 Sometimes I might even take an online class or read a book. But all of these things were just input.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">In Internet culture, there is a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/1%25_rule_(Internet_culture)\">\u201c1% rule\u201d<\/a> that describes the participation rate of an internet community: only 1% of the participants of a community actively create new content, 9% of the participants edit content, and 90% of the participants only view content.<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a><img class=\"aligncenter size-full wp-image-6580\" \/><img class=\"size-full\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1IfWaNRUhCcOn1xhsyiI8VA.png\"><br \/>\n<\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1IfWaNRUhCcOn1xhsyiI8VA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" title=\"1% content rule\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1IfWaNRUhCcOn1xhsyiI8VA.png\" alt=\"\" width=\"650\" height=\"335\" \/><\/a>1% Rule (Internet Culture)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since I started the 100-day-project, I became a creator. I started making things I like, learning a new craft, and influencing people around me in a positive way.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">I want to belong to the 1% people who creates content \u2014 this thought has motivated me to show up every day, especially when it\u2019s hard.<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">End<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Looking back, I\u2019m thankful for people who created tutorials and posted them on Youtube for free. I am deeply motivated by all the creatives out there who are making beautiful things in volume, consistently.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here are 10 creatives who have kept me inspired throughout the project:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/pablostanley\">Pablo Stanley<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/galshir\">Gal Shir<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/TonyBabel\">Tony Babel<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/slimjimstudios\">James Curran<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/eranmendel\">Eran Mendel<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/Jung_Hanna\">Hanna Jung<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/yupnguyen\">Yup Nguyen<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/MikaelGustafsson\">Mikael Gustafsson<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/dchen\">Dave Chenell<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.instagram.com\/beeple_crap\/\">Beeple (Mike Winkelmann)<\/a><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Thanks for reading! Follow me on <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.instagram.com\/tiantianxu\/\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Instagram<\/em><\/strong><\/a><em> and <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/tiantianxu\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Twitter<\/em><\/strong><\/a><em> for my next 100 day project<\/em>\u00a0:)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>If you enjoyed this article, you might also enjoy the following articles on my past projects.<\/em><\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/medium.com\/the-100-day-project\/100-days-of-vector-illustration-6f2f10209b0b\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">100 Days of Vector Illustration<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">My thought process on creating illustration using Sketch<\/span><\/span><\/a><\/section>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/medium.com\/the-100-day-project\/100-days-of-lettering-a2b01ade996f\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">100 Days of Lettering<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">My thought process<\/span><\/span><\/a><\/section>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/medium.com\/the-100-day-project\/100-days-of-doodle-982391750edd\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">100 Days of Doodle<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">3 things I learned from the 100 day project<\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Special thanks to <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/u\/a273e478902?source=post_page-----463526af852f----------------------\"><em>Nina Wei<\/em><\/a><em>, <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/u\/576d7b52af8c?source=post_page-----463526af852f----------------------\"><em>Grace Fan<\/em><\/a><em>, <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.instagram.com\/maomao_niki\/\"><em>Niki Ni<\/em><\/a><em>, and <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.instagram.com\/jonathansmuda\/\"><em>Jonathan Smuda<\/em><\/a><em> for all their help writing this post.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This article was originally published on\u00a0<a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/uxdesign.cc\/100-days-of-motion-design-463526af852f\">Tiantian\u2019s Medium page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It was a summer night in Seattle. I ate some ice-cream, watched a Youtube tutorial, and downloaded a free trial of Principle. Several months later, I completed my 5th 100-day-project \u2014 100 Days of Motion. I started my first 100-day-project back in 2015. My past projects include 100 Days of Doodle, 100 Days of Lettering, 100 Days of Watercolor, and&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":300,"featured_media":18343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-18271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"This is how I taught myself animation in 100 days and learnt from a range of people at the same time using Sketch and a simple lightweight prototyping app.\" \/>\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.shopjessicabuckley.com\/blog\/100-days-motion-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How I taught myself to create 50 pieces of animation in 100 days | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"This is how I taught myself animation in 100 days and learnt from a range of people at the same time using Sketch and a simple lightweight prototyping app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-04T14:30:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T10:23:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2019\/10\/19.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2019\/10\/19.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/\",\"name\":\"How I taught myself to create 50 pieces of animation in 100 days | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#primaryimage\"},\"datePublished\":\"2019-11-04T14:30:55+00:00\",\"dateModified\":\"2020-09-03T10:23:02+00:00\",\"description\":\"This is how I taught myself animation in 100 days and learnt from a range of people at the same time using Sketch and a simple lightweight prototyping app.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/7f2d42939fec3261cab966a811bcf433\"},\"headline\":\"How I taught myself to create 50 pieces of animation in 100 days\",\"datePublished\":\"2019-11-04T14:30:55+00:00\",\"dateModified\":\"2020-09-03T10:23:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#primaryimage\"},\"articleSection\":\"Resources\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/100-days-motion-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/7f2d42939fec3261cab966a811bcf433\",\"name\":\"Tiantian Xu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9b9c2fc70ae24d0960c3d15c384ff46242002e47af3b6b1d4cb2efb52bd7b2a0?s=96&d=mm&r=g\",\"caption\":\"Tiantian Xu\"},\"description\":\"Product Designer by day. Artist by night. 100 Day Project\",\"sameAs\":[\"https:\/\/www.instagram.com\/tiantianxu\/\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/18271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/300"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=18271"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/18271\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/18343"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=18271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=18271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=18271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}