Best Resources to Learn Web Animation
Web animation has never been more capable. CSS scroll-driven animations, view transitions, and GSAP are all mature and widely used. These are the best places to learn them properly.
The Complete Web Developer in 2026
40 hours of video
401+ lessons
10 projects
🎉 Code FRIENDS10 for 10% off
Start with CSS animation
MDN CSS Animations
The complete reference for CSS animations, keyframes, timing functions and properties.
Visit resource
MDN CSS Transitions
How to create smooth property transitions with CSS. The foundation of most UI micro-interactions.
Visit resource
Scroll-driven animations (MDN)
How to create scroll-based animations natively in CSS using
animation-timeline.Visit resource
CSS Easing Functions (MDN)
Everything you need to know about timing functions, cubic-bezier, and steps() in CSS.
Visit resource
GSAP
GSAP Getting Started
The official getting started guide for GSAP, the industry standard for JavaScript animation.
Visit resource
GSAP ScrollTrigger docs
Learn ScrollTrigger, the most used GSAP plugin for scroll-driven animations and parallax effects.
Visit resource
Creative Coding Club (GSAP)
Free video series by the GSAP team covering real-world animation techniques from scratch.
Visit resource
View Transitions
View Transitions API (MDN)
How to create smooth page and state transitions natively in the browser.
Visit resource
View Transitions (Chrome Developers)
Practical guide with demos on how to implement view transitions in single-page and multi-page apps.
Visit resource
SVG Animation
SVG animation guide (CSS-Tricks)
The most complete guide to animating SVGs on the web with CSS and JavaScript.
Visit resource
Motion path (MDN)
How to animate elements along a custom path using CSS
offset-path.Visit resource
People and blogs to follow
Cassie Evans
One of the best creative developers working with SVG and GSAP. Her blog and talks are essential for anyone learning web animation.
Visit resource
Bramus Van Damme
Deep technical articles on scroll-driven animations, view transitions and new CSS features.
Visit resource
Codrops
The best source of creative CSS and JavaScript animation tutorials and experiments on the web.
Visit resource
Stay updated
Design Spells
A newsletter focused on UI details, micro-interactions, and patterns worth borrowing.
Visit resource
Offscreen Canvas
Weekly digest of WebGL, creative coding, and animation resources and inspiration.
Visit resource
Frontend Planet Newsletter
A curated roundup of frontend resources, including CSS, UI inspiration, tools, and learning material worth saving.
Visit resource
Want to see web animation in action? Browse our CSS scroll effect examples and CSS text effect examples for inspiration.