Build Immersive , Award-Winning Websites by Matias Gonzales
Duration:4 hours 18 minutes
Release date:2025
Publisher:FrontendMasters
Skill level:Intermediate
Language:English
Exercise files:Not Provided
Software:GSAP, Three.js, React, Blender
Course URL:https://frontendmasters.com/courses/winning-websites/
Build the kind of high-impact landing pages that turn heads. This course teaches you the exact design, animation, and performance tricks used by top studios to create award-winning web experiences. You’ll move beyond basic transitions and learn how to choreograph complex, silky-smooth animations that tell a story.
🎯 What you’ll learn
- Master modern animation techniques with GSAP and CSS
- Build scroll-based storytelling experiences using GSAP ScrollTrigger
- Optimize animation performance by leveraging GPU acceleration and managing
requestAnimationFrame - Integrate 3D animations using Three.js and React Fiber
- Create accessible, user-friendly animations that respect motion preferences
✅ Requirements
- Skills: Mid-level experience with HTML, CSS, and JavaScript. React experience is recommended but not required.
- Tools: A modern web browser and a code editor.
- Hardware: A computer capable of running a modern browser and a code editor.
📝 Description
This isn’t just about making things move. It’s about building the kind of high-impact marketing pages that companies like Vercel and Apple use to launch products. Matias Gonzales, a Design Engineer at Vercel, breaks down his entire workflow.
You’ll start with the fundamentals of GSAP, learning its intuitive API to create timeline-based animations. From there, you’ll dive into ScrollTrigger to build interactive, scroll-driven stories that pin elements and animate image sequences. The course then levels up by showing you how to combine GSAP with Three.js for 3D experiences that leverage the Canvas and WebGL.
But it’s not all flash. A significant portion is dedicated to accessibility and performance. You’ll learn how to respect user motion preferences, adapt to device capabilities, and keep your animations performant by managing GPU acceleration and avoiding unnecessary re-renders in React. It’s the full package for building a site that looks incredible and works for everyone.
🧑🎓 Who this course is for
- Frontend developers who want to level up their creative coding skills.
- Designers who want to understand how to bring their high-fidelity prototypes to life.
- Anyone curious about how world-class marketing sites combine motion, visuals, and performance.
🧑🏫 About the Author
Matias Gonzales is a Design Engineer at Vercel, where he pushes the limits of the browser to develop award-winning product landing pages. Before Vercel, he was at basement studios, building high-impact experiences for clients like Mr. Beast, Cursor, and Daylight. With over a decade of experience in animation, 3D, and WebGL, Matias is constantly experimenting with new technologies and is currently obsessed with WebGL.
🏁 Final Result
- A portfolio-ready, high-impact marketing landing page that combines GSAP animations, scroll-driven storytelling, and 3D elements.
- A deep understanding of how to build performant and accessible web animations.

Channel