Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Motion For The Web

Go to class Write review

Scrimba

Free courses from frontend to fullstack and AI

Boot.dev

The Most Addictive Python and SQL Courses

Overview

Build a Learning Habit

Download Class Central's free printable study calendar

Download for Free

Master the art of modern web animation, from subtle CSS transitions to full-blown JavaScript motion systems. This series starts with the fundamentals of smooth, accessible CSS motion, then builds through keyframes, scroll-linked animations, SVG techniques, and the Web Animations API, finishing with powerhouse libraries like Motion. dev, AnimeJS, and GSAP.

Syllabus

Introduction

Why Motion?

Never Force Motion Onto Users

Reduced Motion Preference: CSS Media Query
Motion-Guarded HTML Link Tags
Window: matchMedia() in JavaScript

CSS Transitions

A Quick Word About Animation Performance
CSS Transitions 101
Transition Timing Functions
Combined Timing Functions
Transition Shorthand Syntax
Transitioning on Enter and Leave

CSS Animations

Keyframe Animations 101
Keyframe Steps
Animation Fill Mode
Animating Along a Path
Animate Elements When In View
Sync Animations With Scroll
View (Page) Transitions
Dynamic View Transition Names

JavaScript Animations

A Whole New World
Animation Loops in JS
Implicit Animation Framerate
Keyframes Animations in JavaScript (WAAPI)
Animation Playback Controls
Animation Playhead Scrub
Query the Animation Progress

SVG Animations

SVG Line Draw
Animated Spinner

JS Animation Libraries

A Tour Of The Landscape
Motion.dev
Motion.dev: Animate
Motion.dev: Springs
Motion.dev: Sequences
Motion.dev: Hover
Anime.js
Anime.js: Draggable
Anime.js: Draggable Part 2
GSAP
GSAP: Timeline
GSAP: ScrollTrigger
GSAP: Scroll Scrubbing
GSAP: ScrollSmoother
GSAP: Laughably Easy Parallax

Wrap-Up

Canvas/WebGL: When You Outgrow The DOM

Taught by

Simon Vrachliotis

Reviews

Start your review of Motion For The Web