Courses Workshops Motion Systems Blog About Get Certified Login

Dashboard Animations

10 TUTORIALS | 2.5 HOURS | 3 BONUSES

Learn how to make your data and dashboards come alive for your users using Adobe After Effects. Learn how to animate graph shapes and colors, numbers, line graphs, radial graphs, odometer numbers, and more.

βœ“ Learn how to animate graph bars, charts, and shapes
βœ“ Learn how to animate radial graphs
βœ“ Learn how to animate transitions between data states
βœ“ Learn how to animate drawing lines
βœ“ Learn how to handoff animations to engineers

$97

Add to cart View bundle discounts

About this course

 

In the The Dashboard Animations course you will learn how to important UI animations that appear in dashboard and information display contexts. 

In this course, you will be primarily working with Adobe After Effects 'shape layers', which are vector animatable layers. One of the great things about these layers is that you can export them as JSON files for your engineering team. 

You will also be learning strong best practices and workflows, as well as how to make numbers count, the trim paths tool, masking, how to animate changing colors, and other critical tools and techniques.

In putting this course together, I trend-mapped hundreds of dashboard and information related animations. They fell into 8 key buckets, and those are the main lessons in the course. 

I also wanted you to learn how to assemble multiple dashboard pre-compositions that you built into one large display animation. This is the final tutorial. 

The bonuses include my UI Animation Fast Start course if you have no experience working in After Effects. It will get you up and running in less than an hour. If you are new to After Effects, watch that first and then dive into the tutorials. 

When you buy the course, you will also get access to the private UX in Motion Facebook group where you can get questions answered and feedback. 

Best,
Issara Willenskomer
Founder of UX in Motion, Instructor

β˜…β˜…β˜…β˜…

"As a UI designer, I work with charts and dashboard almost every single day. This course from Issara has helped me to level up my infographics design from static to motion and has enabled me to communicate much better with the developers how I want my charts and dashboard to animate. Issara's teaching style is also way cooler than most of the teachers out there. His instructions is clear and straight to the point. If you are a UI designer who is looking to add some motion spice to your design then this course is definitely for you.

– Quoc, Senior UX/UI Designer at Texo Design, Australia

β˜…β˜…β˜…β˜…β˜…

"Great course for someone looking to expand their knowledge of AE and create cool motion of infographics with attention to details. Great tricks and good advises. I appreciate the professionalism and great material of the course. I learned a lot of things that I later found myself using them in many different scenarios even other than Infographics."

– Elizaveta, Digital Experience Designer at Ford, Michigan

 

Used by designers at:

Files included in the course

My goal is to make your learning experience as seamless as possible. That’s why I’ve included all the design source files, downloadable video tutorials (to sync with your devices and watch offline), as well as the After Effects project files.

Design files

Depending on the project, this could include Photoshop, Illustrator, or Sketch. You don't need to have these programs to use this training. 

Video tutorial files

HD video files for you to watch online or download and sync to watch later on your devices. 

After Effects project files

Use this file to follow along with the tutorial and even ideate your own solutions and iterations!

What you will learn in this course

Tutorial #1 – Introduction and workflow overview
Duration: 20 min

In this first tutorial, you learn all the pros and cons of bringing your data design into After Effects from Photoshop or Illustrator. You learn which program supports guides, which supports shape layers, pre-compositions, and more. This first tutorial will set you up powerfully when you begin animating your work in the next tutorial.

Tutorial #2 – Animating graph shapes
Duration: 19 min

Working with After Effects shape layers is key to data driven animations. You learn how to turn your design asset into an After Effects shape layer and how to use the ‘trim paths’ tool, as well as other important properties to animate the transition on, color, stroke, and dash values.

Tutorial #3 – Slot machine/odometer numbers
Duration: 20 min

Knowing how to animate slot machine/odometer numbers is a great skill to have. You learn how to apply and animate the ‘offset’ tool to your design assets, as well as how to nail the timing and easing to create a professional animation. Learn other iterative possibilities as well.

Tutorial #4 – Bar graph
Duration: 33 min

In this powerful tutorial you will learn how to set up and animate multiple shape objects from your design file inside of After Effects. You’ll learn a simple technique for quickly animating the entire graph, as well as more techniques to give you detailed finessing options over your shape, color, and timing.

Tutorial #5 – Animating multiple radial graphs
Duration: 4 min

In this tutorial, you’ll learn how to very quickly convert your UX/UI design to editable shapes inside of After Effects, animate the shapes with the ‘trim paths’ tool, and finesse the timing and trim controls to design the exact animation you need.

Tutorial #6 – Radial graph transition jubilee
Duration: 25 min

Time to take things up a notch and learn how to prototype iterative UI animations. Learn how to create multiple versions from the same design asset, playing with radial transitions, nulls, and adding subtle details to take your UI animation to the next level. Learn basic expressions and ways to simplify your animation setups for maximum iterative flexibility.

Tutorial #7 – Overlapping radial graphs
Duration: 10 min

In this tutorial, you learn how to work with overlapping assets and how to finesse the timing to tell the story. Using the ‘trim paths’ tool, you learn how to quickly iterate overlapping designs and time them with professional easing.

Tutorial #8 – Dashed ‘speedomoter’ graph
Duration: 8 min

Learn how to set up and animate a dashed line graph using After Effects layer styles and track mattes. Takes layer styles animations to a new level and allows for plenty of UX/UI related iterative possibilities.

Tutorial #9 – Graph volume and color change
Duration: 14 min

Learn how to change any graph shape and animate the stroke and fill independently using After Effects layer styles. Useful in a variety of situations and data related contexts. Build a simple and elegant numbers transition using track mattes.

Tutorial #10 – Bringing it all together
Duration: 6 min

In this powerful lesson you will learn how to import your previous After Effects tutorial projects you completed and assemble them into a UI animation dashboard masterpiece.

Watch sample from this course

Watch a 60 second sample from the Dashboard Animations course

 

Buy your course today!

Add to cart Replay

Course includes these 3 bonuses

These additional training and resources will help you to get up and running fast, with great content and access to Q&A

UI animation with After Effects Fast Start course

New to After Effects? Get up and running in less than an hour with this 3 part Fast Start video course.

Private UX in Motion Facebook group

Get your questions answered in this exclusive group of world class designers. Post, share, and critique inspiration. Get new tips and resources. 

UI Animation After Effects keyboard shortcuts

Print out and accelerate your learning with these 23 critical keyboard shortcuts just for UI animation. PDF included with purchase of course. 

Issara Willenskomer
Instructor

Issara Willenskomer is an award-winning designer and educator. With over 15 years of interaction and motion design experience, Issara has worked with an impressive list of clients including Facebook, Microsoft, Twitter, Nordstrom, Amazon, HBO, MTV, AT&T, Motorola, T-Mobile, UNAIDS, HTC, Philips, and more. Issara has personally trained the design teams at Dropbox, Slack, Airbnb, Salesforce, Oracle, and others. Issara currently teaches motion innovation both online and in the real world.

🀝 30 day money back guarantee

If you are not 100% satisfied for any reason, I will give you a full refund. No questions asked.

Buy now

Don't own After Effects? Not a problem! Download the free 30 day demo of After Effects from the Adobe site.

Close

50% Complete

Two Step

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.