11th Grade — Motion Graphics Deep Dive: Keyframing a Title Animation

⏰ Do Now — Start Here

Watch any professional title sequence or logo animation. Does the motion ever move at a perfectly flat, constant speed the whole way through -- or does it ease in and out?

🎯 Today's Big Question

If you chose (or want to try) the Motion lane, what does professional keyframe animation actually look like, beyond a simple GIF?

📈 By the End of Today, You Will Be Able To

Explain the difference between a Motion Tween-style animation (a symbol moving through space) and keyframing individual properties directly.
Build a short title or logo animation using at least 3 separate keyframed properties (position, scale, opacity).
Apply easing to at least one keyframe pair so the motion doesn't move at a flat, constant speed.

🧰 What You'll Need

Motion or graphics software with keyframe controls (Premiere Rush, CapCut, Canva, or Photoshop's Timeline panel)
The Motion Path (companion book), Ch. 4.6 and 10.6, as a concept reference

📋 Your Plan for Today

Day 1: Learn & Plan

Do Now (5 min, above).
Mini-lesson (15 min): keyframes, easing, and why flat constant-speed motion is a beginner tell.
Plan (20 min): sketch out a simple title or logo animation with at least 3 keyframed properties.

Day 2: Build & Refine

Independent work (30 min): build the animation, applying easing to at least one keyframe pair.
Export & share (10 min).

🖥️ Today's Slide Deck

Short, on-the-board pacing slides — project these to follow along. (The full details are in the handout above, not here.)

Day 1

⬇️ Open / download this slide PDF

Day 2

⬇️ Open / download this slide PDF

📚 Key Words

Keyframe: A saved value for a property at a specific point in time -- animating anything needs at least two.
Easing: Accelerating or decelerating motion between keyframes, instead of moving at a constant speed -- the same "Slow In/Slow Out" idea from the 12 principles of animation.
Motion Tween: Automatically animating a symbol's position, scale, or rotation between two keyframes.

✅ What Your Finished Work Should Include

Finished animation assessed for at least 3 genuinely keyframed properties and visible easing, not just a single built-in template effect.

Exit Ticket: Where did you apply easing, and how did it visibly change the motion compared to constant speed?

📊 Before You Leave

Quick, anonymous class check-in -- takes less than a minute.

Class Check-In

📁 Portfolio Update — Once a Week

Once a week (e.g. every Friday, or your class's last meeting of the week), add your best finished or in-progress work to a running portfolio folder with a 1-2 sentence caption: what it is, what skill or standard it shows. This becomes your formal Google Sites portfolio in Unit F -- keep it current all year so you're not scrambling right before your PBAT and portfolio review.

✍️ Example description for your Google Sites portfolio (fill in YOUR blanks -- don't just copy this):

For this piece, I made ______________ (name what you made) for “Motion Graphics Deep Dive: Keyframing a Title Animation.” This project asked: “If you chose (or want to try) the Motion lane, what does professional keyframe animation actually look like, beyond a simple GIF?” I used Keyframe by ______________ (explain how you used it in THIS piece). The hardest part was ______________, and I solved it by ______________. I'm proud of ______________ because ______________.

🎓 ACP Exam Prep

This lesson connects to the Photoshop Adobe Certified Professional exam: Domain 4: Creating and Modifying Visual Elements

🔗 Want to Learn More?

The Motion Path (companion book) -- Ch. 4.6 (Premiere) & 10.6 (Animate), Keyframes

🚀 The Extra Mile

Cross-Class Connection: The same rate-of-change and acceleration thinking a Physics or Calculus class covers.

Career Connection: Directly ties to Animation and motion-graphics work referenced throughout Digital Designer roles.

Go further -- turn this into a portfolio piece:

Build a second title animation using a completely different easing style and compare the two side by side. Start here: keep everything else identical — text, color, timing duration — and change only the easing curve, so the comparison actually isolates that one variable.
Recreate the same animation two ways — once keyframing properties directly, once (if available) using a tween-based tool — and write a sentence on which felt more controllable. Start here: build the keyframed version first since it's your baseline, then attempt the tween-based version so you have something concrete to compare it against.