Coursera Plus Annual is 40% Off — Ends July 13.

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

Laracasts

Motion For The Web

via Laracasts

Go to class Write review
OpenLearning Ad

Master AI and Machine Learning: From Neural Networks to Applications

Learn More → CodeSignal Ad

Learn the Skills Netflix, Meta, and Capital One Actually Hire For

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
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

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.