Advanced
Web Animations
for Frontend Developers

Master modern web animation — from basics to production motion

Advanced course for frontend engineers who want to build high-quality animations across CSS, JS, SVG, Canvas, WebGL, and Three.js — from micro-interactions to complex, performance-focused motion

Join the Waitlist

  • engineered for

    frontend developers

  • build

    real projects

  • master

    production motion

Who This Course Is For

  • This course is perfect for developers who:

    • are mid-level or senior frontend engineers;
    • already feel confident with HTML, CSS, and JavaScript;
    • want to move beyond basic transitions and into advanced animation architecture;
    • work on complex UIs where quality and clarity matter;
    • want to build motion that’s intentional, meaningful, and production-ready;
    • need animations that stay stable, performant, and maintainable over time.

What You’ll Learn

  • By the end of this course, you’ll be able to:

    • Design motion that enhances UX and strengthens interface comprehension.
    • Work with timing, easing, motion phases, and visual rhythm.
    • Build interactions and sequences that feel “alive” while staying predictable.
    • Use CSS and JavaScript to create animations at any level of complexity.
    • Think in animation architecture: states, transitions, triggers, scene composition.
    • Optimize for performance and avoid common animation pitfalls in real UIs.
    • Create reusable and scalable motion patterns for design systems.

Real Projects You’ll Build

Guided Project

Throughout the course, we’ll build a promo website for the “Illusion” festival. Step by step, you’ll learn how to design and implement animations that guide attention, shape transitions, and bring a sense of life to the interface.

The final result is a production-grade experience with dynamic state changes, expressive micro-interactions, and clean, well-structured motion sequences.

Your Personal Project

Throughout the course, you’ll work on your Personal Project — a pre-built website for the “Mysterious Vacation” game competition. Since the layout is already done, you can focus entirely on what matters most here: crafting fun, expressive animations.

By animating this playful mini-site, you’ll practice applying course techniques on your own and end up with a polished, portfolio-ready piece that shows your ability to bring personality, clarity, and engagement to real interfaces.

Curriculum Overview

Section 1

Animation Fundamentals

What’s inside this section:

  • How the browser’s rendering pipeline works.
  • CSS transitions vs. CSS animations — what’s different.
  • Timing functions — built-in options and custom cubic-beziers.

In this first section, we’ll take a look at where animation comes from and how the illusion of movement is created. You’ll learn the difference between classic animation and computer animation, as well as the basic abstractions that modern tools use to bring things to life on screen.

We’ll talk about linear vs. frame-by-frame animation, go over the famous 12 principles of animation, and see how they apply to interfaces. After that, you’ll create your first simple animated transitions using CSS.

Section 2

CSS Animation

What’s inside this section:

  • We’ll look at tools for debugging animations in the browser and improving their performance.
  • You’ll learn how to move part of CSS rendering to the GPU.
  • We’ll get familiar with the principles of Material Design.
  • We’ll explore what it means to give objects “weight,” create a sense of realism, and follow the principle of cause and effect.
  • We’ll take a closer look at three key principles of expressive animation: timing, staged movement, and follow-through/overshoot.
  • We’ll practice working with timelines for composite objects and groups of elements, and learn how to plan animation: telling a story and guiding the user’s attention.

In the second section, we’ll continue exploring animation using CSS.

Section 3

SVG Animation

What’s inside this section:

  • We’ll look at when it’s a good idea to use SMIL and when it’s better to avoid it
  • We’ll learn how to animate an object moving along a path and how to trigger animations with events such as “click” or “another animation finished.”
  • We’ll take a closer look at four more principles of expressive animation: squash and stretch, exaggeration, arcs, and appeal.
  • In the practical part, we’ll create a drawing effect and an animated flight.

In this section, we’ll explore the SMIL specification, which defines animation inside SVG.

Section 4

Frame-by-Frame Animation

What’s inside this section:

  • window.requestAnimationFrame()
  • The canvas element, its parameters, and methods.
  • The animation render loop for a simple element: transforms, drawing an image, masking.
  • An abstract object class (a “rig”), class extension.
  • Defining trajectories parametrically — examples: ellipse, spiral, parabola, sine wave, damped sine wave.
  • Manipulating trajectories: addition, multiplication, translation, shifting the phase of a sine wave.
  • The update() and render() methods.

In this section, we’ll move on to a lower-level abstraction: frame-by-frame animation. We’ll learn what FPS is, the common FPS values (24, 30, 60), and what “variable FPS” means.

We’ll also look at examples of frame-by-frame animation:

  • Character state animation in games — the method used on the web is Sprite Sheets: pre-made animations or a 360-degree model (for example, a car).
  • Computer animation and motion design — the method on the web is JS Tween and JS Morph using libraries like CreateJS, AnimateJS, and GSAP.
  • Games that track player actions in real time — racing, Tetris — the method is building models with interactive interfaces — on the web, this becomes interactive elements and games.

Section 5

WebGL & Shaders

What’s inside this section:

  • What vertex and fragment shaders are.
  • How to use WebGL 3D capabilities for 2D effects.
  • What geometry is.
  • The WebGL pipeline.
  • Interaction between JS and WebGL.
  • Data types in WebGL.
  • Writing GLSL — the basics.

This chapter is dedicated to the basics of WebGL — a low-level API for rendering 2D and 3D graphics in the browser. Here we’ll break down the key concepts that help you understand how objects are drawn on the GPU, how shaders work, and how buffers and matrix transformations are used.

This chapter provides the theoretical foundation. If your goal is to quickly start working with Three.js, it’s better to move to the corresponding chapters and use this one as a reference.

Section 6

Three.js Part 1: 3D in the Browser

What’s inside this section:

  • A minimal Three.js scene.
  • Geometry: built-in parametric types, custom imported geometry, and buffer geometry.
  • Materials: what types exist, how they differ, render modes, and custom materials.
  • The render loop.
  • Position animations and the Morph animation method.
  • Scene + camera setup, adding objects to the scene, grouping.
  • Lighting: types of light sources, and the Matcap material.

In this chapter, we’ll return to coordinate systems, points, and vectors. We’ll study 3D transformation matrices, quaternions, Euler angles, and matrix multiplication.

Section 7

Three.js Part 2: Working with the Camera

What’s inside this section:

  • We’ll see what types of cameras exist in Three.js, their parameters, and how to handle resizing when switching to mobile.
  • We’ll explore approaches to camera animation. We’ll look at responding to user actions — smooth changes in viewpoint and controlling the camera through a rig, including the camera rig’s render loop. We’ll also create a flythrough animation.
  • Camera rigs.
  • Switching between cameras — editing. Editing rules.

In this part, we’ll look at what a camera is in WebGL, and specifically in Three.js. We’ll get familiar with camera controls, basic camera movements, and camera rigs. We’ll study different rig setups for different types of control.

Section 8

Modern Use of WebGL and Three.js

What’s inside this section:

  • Why Three.js is often the best choice for commercial projects.
  • Exporting from the Blender 3D editor — capabilities and limitations.
  • Realistic materials and their fine-tuning.
  • Creating your own material from scratch and reviewing different approaches.
  • Performance and optimization. Optimizing heavy scenes: instancing, texture atlases.
  • Profiling and debugging tools.
  • Alternatives: Pixi.js, Babylon.js, OGL, Regl.

This chapter focuses on the practical use of WebGL and popular 3D libraries to create visually impressive and technically optimized scenes. We’ll break down the web-graphics ecosystem, learn how to work with PBR materials, import models from Blender, optimize performance, and choose the right tools for different tasks.

Course completed!

How the Course Works

  • You’ll learn through a practical, structured workflow that combines clear theory, focused practice, and real projects — all in a flexible, asynchronous format.

    • Guided theory: concise explanations, curated materials, and code demos based on the Guided Project.
    • Hands-on practice: assignments for your Personal Project that help you immediately apply each technique.
    • Asynchronous format: start anytime and move at your own pace, easily fitting the course around your workload.
    • Effective learning formats: text lessons, interactive exercises, screencasts, and video only where it truly adds value.
    • Industry-level standards: real problem-solving, expert demonstrations, and production-ready approaches.
    • Resources included: code repos, templates, examples, and lifetime access to all materials and updates.
    • Community: a space for questions, discussions, and peer support.

ready to build better motion?

Join the waitlist to get early access to the course, updates, and the opening date.