Courses / Motion design for developers

Applied motionAbout 75 minutes7 practical labs

Motion design for developers

Design purposeful interface motion. Shape timing, easing and sequence, handle interruptions, and adapt for smaller screens and reduced motion.

Everyday page and interface motion with GSAP. Focus on design decisions and usable behaviour; advanced scroll choreography and WebGL are outside this course.

Start the free courseSee the curriculum

Fit a lab into a lunch break or stay for a spare hour. Progress is saved so you can come and go. Labs need a laptop or desktop; the outline is available on any device.

The entire course is free: every lab and a personal completion download. No account or purchase is required. Progress is saved in this browser. Clearing browser data will remove it.

A sequence with a purpose.Interactive practice

Motion / A visual timeline

Let attention
arrive in order.

Introduce. Explain. Invite.

Timing, easing and usable behaviourFree course

The curriculum

7 practical labs.
Decisions you can use.

Every lesson starts with a short principle and a page that needs work. You make the changes. The feedback tells you which relationships work and what to try next.

By the end, you can

  • Choose where movement helps
  • Balance distance, duration and easing
  • Sequence content with a GSAP timeline
  • Keep staggered groups responsive
  • Handle interrupted interactions
  • Preserve content and feedback with reduced motion

Basic HTML, CSS and a little JavaScript. The free visual hierarchy course is recommended; GSAP expertise is not required. Use a laptop or desktop with a browser window at least 1024px wide. Work at your own pace; there is no timer.

  1. 01
    Give motion a purpose

    A moving element asks for attention. If every region asks at once, the page can have a clear visual hierarchy but a confused moving one. Begin by deciding which movement helps a reader understand the page.

    8 min
  2. 02
    Make movement feel right

    Distance, time and easing work together. The same duration can feel calm over a small distance or rushed over a large one. Easing changes where in that time the movement happens.

    10 min
  3. 03
    Direct attention with sequence

    A sequence can guide attention while keeping a page quick to use. Waiting for every tween to finish before starting the next often turns a modest entrance into a slow introduction.

    12 min
  4. 04
    Build rhythm with stagger

    A stagger offsets the start of each item in a collection. Small offsets can establish a rhythm; repeating a large delay six times makes the later content feel held back.

    10 min
  5. 05
    Handle interruptions

    People do not wait politely for an animation to finish. They change their mind, click twice or act before a panel has settled. A happy-path demonstration can hide an interaction that feels unreliable.

    10 min
  6. 06
    Adapt the motion

    A movement that is modest on a wide page can dominate a narrow one. Some people also ask their system to reduce motion. Both cases deserve an intentional treatment rather than hidden content.

    10 min
  7. 07
    A fresh brief

    Transfer the decisions to a different page: a checklist someone wants immediately before shipping an interface. The content is new and the time budget is tighter. There is no single finished animation to copy.

    15 min

Proper interaction.

Replay and scrub real motion, change timing and easing, test repeated interactions, and inspect the resulting GSAP. Compare the original with your edit at desktop and narrow widths.

A completion record.

Pass the practical checks in each lab to download an optional personal completion record. It is created on your device, has no public verification page and is not an accredited qualification.

For you, or your team.

This course is free for individuals and teams. No account is needed. Progress is saved in this browser. Clearing browser data will remove it.