Skip to content

Motion Studio, from zero to pro

Learn to find the right CSS animation, shape its colours, timing and easing, and take it into a website, a React, Vue or Svelte app, or a GIF, a video or an animated SVG, all without an animation library.

Motion Studio6 lessons21 minBeginner to Advanced6 videos
0 · Start6 lessons100 · Pro
Start with lesson 1Open Motion Studio
Nothing loads from YouTube until you press play. Then Google receives your IP address and may set its own storage. Narrated with an AI-generated voice. Privacy

This course starts where you have never opened Motion Studio and ends with you adding motion to a site or an app the way a motion designer would: the right motion for the job, timed and eased with intent, accessible to everyone, and in the exact format each place needs.

Each lesson is short and does one job. By the end you can turn a library animation into your own, explain why one easing curve feels better than another, and ship motion as code or as a file.

What you will be able to do

  • Add a ready-made CSS animation to a web page in two minutes
  • Find the right motion among 150, by kind, by how it plays, or by searching
  • Change its colours, size, speed, text and timing, and study any moment on the stage
  • Shape easing curves, from ease out to springs and bounces, and know which suits what
  • Copy clean HTML and CSS, or a React, Vue or Svelte component, that respects reduced motion
  • Save a motion as a GIF, an MP4 or WebM video, an animated SVG or a PNG for slides, READMEs and posts

Who it is for

Front-end developers, designers, people who build landing pages, dashboards and presentations, and anyone who wants a loader, a text effect or a lively button without writing keyframes from scratch. You need no account. Basic HTML helps for lessons 1 and 5; the rest needs nothing.

The lessons

Beginner
  1. 01Add a CSS animation to your website in two minutesYour first motion from Motion Studio. Pick a loader, change its colour, copy its HTML and CSS, and paste them into a page. No library, no build step, and it stops for people who prefer less motion.7 steps3 minVideo17% of the course
  2. 02Browse and search 150 CSS animationsFind the right motion fast in Motion Studio. Browse ten kinds from loaders and text effects to pointer motions and charts, filter by how a motion plays, search by word, and keep favourites.6 steps3 minVideo33% of the course
  3. 03Customise a CSS animation and study it on the stageMake a library motion your own in Motion Studio. Change colours with palettes that go together, size, thickness, speed, stagger and text, then pause, scrub to any moment and slow it down to check every frame.5 steps4 minVideo50% of the course
Intermediate
  1. 04CSS easing curves explained, with springs and bouncesWhat an easing curve does, which one to use when, and how to shape your own in Motion Studio's easing editor, from ease out and cubic-bezier to springs and bounces written as CSS linear().6 steps4 minVideo67% of the course
  2. 05Take the code for HTML, React, Vue or SvelteCopy a Motion Studio animation as plain HTML and CSS, a React component, a Vue single-file component or a Svelte 5 component. How hover, click and pointer motions work in code, and why every one respects reduced motion.7 steps4 minVideo83% of the course
Advanced
  1. 06Turn a CSS animation into a GIF, a video or an animated SVGSave any Motion Studio animation as a GIF, an MP4 or WebM video, an SVG that animates by itself, or a PNG of one frame. Pick the size, frame rate, length and sharpness, and keep files small, all in your browser.6 steps3 minVideo100% of the course
Contact