Zero knowledge → degree → professional → expert

Animation & Motion Design

Web animation, motion graphics, 2D/3D and game-quality effects

29 structured topics, each reinforced with plain-language teaching, memory hooks, hands-on practice, retrieval, teach-back, speed recall, professional transfer and spaced review.

Start learning

How mastery works

1. Five-year-old simple

Every new term is explained without assumed knowledge and linked to a familiar picture.

2. Do it

Guided labs, typing, diagrams, configurations, queries or professional artefacts turn words into usable skill.

3. Retrieve it

No-peeking recall, teach-back and 60-second checks force the brain to retrieve instead of recognise.

4. Use it professionally

Failure modes, security, evidence, capstones and spaced repetition build degree and workplace fluency.

Course topics

  1. What Is Animation? — Frames, timing, illusion of life
  2. 12 Principles of Animation — Squash, stretch, anticipation
  3. Timing & Spacing — Why motion feels right or wrong
  4. Easing Curves — ease-in, ease-out, cubic-bezier
  5. Storyboarding — Planning motion before building
  6. CSS Transitions — Your first web animation
  7. CSS Keyframes — Multi-step animations
  8. Transforms — translate, rotate, scale, skew
  9. Animation Performance — GPU, repaints, 60fps
  10. SVG Animation — Paths, strokes, morphing
  11. Lottie & After Effects — Designer-made web animation
  12. Framer Motion — Animating React interfaces
  13. Scroll-Driven Animation — Parallax and reveal effects
  14. Micro-interactions — Buttons, toggles, feedback
  15. Canvas Basics — Drawing with code
  16. The Animation Loop — requestAnimationFrame
  17. Sprite Sheets — Classic 2D character animation
  18. Motion & Physics — Gravity, springs, bounce
  19. Particle Effects — Sparks, smoke, confetti
  20. 3D Basics — Meshes, cameras, lights
  21. Three.js Intro — 3D in the browser
  22. Blender Fundamentals — Modelling and rendering
  23. Rigging & Skeletons — Making characters move
  24. Motion Graphics — Titles, logos, explainers
  25. Video Editing Basics — Cuts, pacing, sound
  26. AI-Assisted Animation — Generative motion tools
  27. Motion in UX — Guiding attention, not distracting
  28. Reduced Motion & Accessibility — Respecting user settings
  29. Capstone: Animated Landing Page — Ship a polished animated experience

← View the complete AIblty curriculum