Shots in this scene
What You Will Learn and What You Get
In one line
The course goes from what a frame is to shipping a fast, accessible motion system: CSS first, then performance and accessibility, then JavaScript, physics, layout, scroll and SVG motion, then GSAP, Motion and designer files, then production. You finish with a launch page you can show in an interview.
Think of it like this
Learning to drive starts with how the pedals and mirrors work, then quiet roads, then traffic, then motorways, and only then night driving in the rain. Nobody starts on the motorway. This course is ordered the same way: each phase uses only what earlier phases taught.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- phase
- One part of the course, with 5 to 8 topics and a set of exercises. There are 20, numbered 0 to 19.
- build topic
- The last topic of each phase. It changes your lumen-motion project and lists every file it adds or changes, in full.
- exercise
- A task you solve in the editor. Press Check and the page tests your work, for example where an element is 150 ms after a click.
- portfolio piece
- A finished project you can show an employer, with a short write-up of what you built and why.
Step by step
01Learn how motion works before any tool
Phases 1 and 2 have almost no new syntax. They teach frames, time, what the browser does each frame, and what makes motion feel good. Everything later rests on them.
02Master CSS, then make it fast and safe
Phases 3 to 5 cover CSS transitions, keyframes and easing in depth. Phases 6 and 7 then measure what animations cost and make them safe for everyone, so you never build a habit you would have to unlearn.
03Take control with JavaScript
Phases 8 to 13 add the Web Animations API, springs, FLIP layout animation, View Transitions, scroll-driven animation and SVG. Each solves a problem CSS alone cannot.
04Use the industry's tools, then ship
Phases 14 to 17 teach GSAP, Motion for React, designer files and canvas. Phases 18 and 19 turn it into a system a team can rely on: tokens, tests, monitoring, interviews and a launch audit.
Try it yourself
- 1
Compare the transition and the easing
Press Phase 3: transition, then Phase 5: easing (each press moves the card the other way). The first moves at one steady speed. The second starts fast and slows down gently at the end, which feels quicker even though both take 600 ms. Phase 5 explains why.
- 2
Watch the spring overshoot
Press Phase 9: spring and slow the timeline to 0.25×. The card goes past its end point and comes back, like a weight on a spring. Here the overshoot is written into a
linear()easing; in Phase 9 you write the spring itself, which can also change direction smoothly in the middle of a move.
Code & diagrams
The same card moved four ways. Press each button, then pause the timeline and step through: the tracks show a transition, an eased transition, a spring sampled into linear() and a keyframe animation.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Remove the transition
In "A taste of four phases", change card.style.transition = "transform 600ms linear"; to card.style.transition = "none"; and press Phase 3: transition.
Myth vs fact
Myth
To animate well you need a big library like GSAP.
Fact
Most interface motion is a few lines of CSS or one element.animate() call. Libraries help with long sequences, scroll stories, physics and React, so this course teaches the platform first and the libraries where they pay off.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
The order is deliberate: performance (Phase 6) and accessibility (Phase 7) come before JavaScript animation, so every later build already uses compositor-friendly properties and a reduced-motion path. Most courses add these at the end, if at all.
- ▸
Every exercise is checked by freezing the page's clock and stepping it frame by frame, so a check like "150 ms after the click the toast is half visible" gives the same answer on every machine. Phase 18 teaches you to test your own animations the same way.
Remember this
- 1
The problem this solves: most animation tutorials teach one tool (only CSS, only GSAP, only Motion for React) and skip the parts that matter at work: why an animation stutters, how to make it safe for people who need less motion, how to test it, and how to choose a tool. You would have to stitch ten sources together. Here it is one path.
- 2
Beginner (Phases 0–4): how motion works and CSS. Frames and time (Phase 1); what motion is for and the classic principles of animation (Phase 2); CSS transitions in depth (Phase 3); transforms and keyframe animations (Phase 4). By Phase 4 you can add feedback, toasts and loading motion to any page.
- 3
Intermediate (Phases 5–13): doing it well. Easing curves and their maths (5); performance, measured (6); accessibility and motion safety (7); JavaScript animation and the Web Animations API (8); springs and physics (9); layout animation with FLIP (10); View Transitions between pages (11); scroll-driven animation (12); SVG animation (13). Performance and accessibility come early, so every later phase uses them.
- 4
Advanced (Phases 14–19): tools and production. GSAP with ScrollTrigger (14); Motion for React (15); Lottie and Rive files from designers (16); canvas, particles and creative effects (17); motion tokens, testing and monitoring (18); interview questions, live build rounds and a launch audit (19).
- 5
What you get when you finish. You can add fast, accessible motion to any website or React app, choose between CSS, the Web Animations API, GSAP, Motion, Lottie and canvas and explain why, find and fix a stuttering animation with measurements, and answer interview questions on rendering and animation. Your portfolio piece is the Lumen Volt launch page with a README of measured numbers. Hectal is free and does not give certificates or promise jobs: what you get is the skill and the project to prove it.
- 6
How every topic works. An everyday picture first, then the problem, then the real mechanism step by step, then live examples you can edit, then breaking things on purpose, then interview-grade questions with model answers. Each phase ends with a build topic that adds one piece to your launch page, and with exercises that check your work automatically.
Explain it without notes
Why does this course teach performance and accessibility before GSAP and Motion?
What can you build and explain when you finish the course?
Practice
Write down two animations you want to be able to build by the end of the course (from sites you admire). In which phase do you expect to learn each one?
Pick your path: are you a beginner, a developer who needs job-ready motion skills, or a senior who wants depth? Write down which phases you will do first.
Done when you can
You can describe the course's three levels and what each adds
You can say what you will have built at the end and how it is checked
You have chosen where to start