Motion for the web
Eleven chapters on animation that has a job to do. Start with timing and easing, move through CSS and GSAP, and finish with scroll, SVG and motion that respects every reader.
- Level
- Intermediate
- Chapters
- 11 in 4 parts
- Time
- 1 h 42 min
- Format
- Reading, live demos, quizzes
- Cost
- Free, no sign up
- Updated
02What you will be able to do
- 01Choose a duration and an easing curve for a movement, and explain the choice
- 02Build transitions and keyframe animations in CSS that stay smooth on slow phones
- 03Sequence a page reveal with GSAP timelines and tie motion to scroll
- 04Draw SVG line animations and respect readers who ask for reduced motion
03Who it is for
- Designers who animate in Figma or After Effects and want to know how it is built in the browser
- Front end developers who can build a page and want its motion to feel considered, not added on
- Webflow builders who want to understand what their interactions do under the hood
04Before you start
- Comfortable with HTML and CSS, including selectors and the box model
- Some JavaScript helps from Part 3 on, but every example is complete
- Read How websites work first, or be comfortable with what it covers
05Syllabus
11 chapters in 4 parts
Part 1
Principles
- 01 UI animation principles: why motion?The five jobs motion can do on a page, when to leave things still, and how to plan motion before writing any code. 9 min
- 02 CSS easing functions and timingHow long UI motion should take, which curve to use for entering and leaving, and how to write your own easing. 10 min
- 03 Staggered animation and sequencingHow to offset a group of animations so they read in order, and how to keep the whole reveal under a second. 9 min
Part 2
CSS
- 04 CSS transitions: hover, focus and entryThe transition shorthand, hover and focus states for every input, and how to animate elements in from display: none. 8 min
- 05 CSS keyframe animation: @keyframes and the animation propertyHow @keyframes and the animation property work, from fill mode to loops, and when to choose them over a transition. 10 min
- 06 Transform, opacity and compositor only animationWhy transform and opacity animate smoothly when other properties stutter, and how animation affects responsiveness and loading. 10 min
Part 3
GSAP
- 07 A GSAP tutorial: tweens, eases and staggerWhat GSAP is, when it beats CSS, how to load it, and the four tween methods, eases and stagger you will use most. 9 min
- 08 The GSAP timeline: sequencing a hero introHow timelines place tweens in time with the position parameter, labels and defaults, and how to play, reverse and replay them. 8 min
- 09 Scroll animation with GSAP and CSSTie motion to scroll with ScrollTrigger and CSS scroll-driven animations, and know when smooth scrolling is worth it. 11 min
Part 4
Finish
- 10 SVG line animation: make a path draw itselfMake an SVG path draw itself with stroke-dasharray and stroke-dashoffset, in CSS or GSAP, without confusing screen readers. 9 min
- 11 Prefers reduced motion: animation for every readerRespect readers who ask for less motion: what WCAG asks, how to read the setting in CSS and GSAP, and what to keep or remove. 9 min
06What you will build
A hero reveal, rebuilt from scratch
Each chapter adds one piece to a landing page hero: a staggered heading, a hover that feels right, a section that answers the scroll and a line that draws itself. The last chapter makes all of it respect reduced motion.
Need one built properly? See our motion and 3d service.
07FAQ
About this course
Something else on your mind? Email the studio and a designer, not a salesperson, replies within a day.
Is the web animation course free?
Yes. Every chapter is free to read with no sign up. Your progress is saved in your own browser, so nothing about you is stored on our side.
Do I need to know JavaScript?
Not for the first two parts, which are all CSS. Part 3 uses GSAP, a JavaScript library, but every example is short and complete, so you can copy it, run it and change one thing at a time.
Is GSAP free to use?
Yes. GSAP and its plugins, including ScrollTrigger, are free to use on commercial sites. The GSAP chapters link to the official documentation for the current licence.
Will animation slow my site down?
Not if it is built the way this course teaches. Chapter 6 shows which properties are cheap to animate and how to keep animation away from the content that loads first.
08Start a project