Put Your Designs Into Motion

Learn how to use After Effects to add motion to your static designs. Joined by Motion Design Course TA, Dakota, and Graphic Design Course TAs, Mindy and Sarah, we’ll walk through a live demonstration on how to bring your design to life.

Timestamps:

0:02:53 — The instructors introduce the team and break down the different design courses, including graphic design and motion design.

0:05:18 — Walkthrough of the homepage layout and discussion of which section will be animated, including marquee and floating product-callout ideas.

0:07:50 — The group brainstorms adding 3D motion and layered depth effects using Cinema 4D concepts for the lookbook section.

0:10:40 — Dakota explains how website animations are translated from After Effects into web-ready motion using Lottie and shares examples from Google Pay work.

0:15:17 — Dakota demonstrates prepping Figma assets for After Effects, including cleaning layers and using the Overlord plugin to transfer live text and vectors.

0:27:15 — The team builds out the animation concept live, experimenting with pixelation, mosaic effects, easing, and layered thumbnail transitions.

0:35:57 — A developer in the audience shares how designers’ animation ideas affect engineering timelines, leading to a discussion about balancing creativity with feasibility.

0:44:37 — The instructors explain keyframes, easing, and motion curves while demonstrating how animations are controlled in After Effects.

0:56:59 — The conversation shifts to industry trends, with the instructors explaining why motion design is becoming essential for websites, branding, and social media content.