Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :
Oh Snap!

It looks like you're using an adblocker. Adblockers make us sad. We use ads to keep our content happy and free. If you like what we are doing please consider supporting us by whitelisting our website. You can report badly-behaved ads by clicking/tapping the nearby 'Advertisement' X text.

Build Immersive , Award-Winning Websites by Matias Gonzales

Build Immersive , Award-Winning Websites by Matias Gonzales

/

Author: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/

Learn the design, animation, and performance techniques used by Vercel and basement studios to build high-impact, award-winning marketing 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.
Curriculum

📋 Course content

  1. Introduction
    • Introduction (11 minutes)
  2. GSAP Basics
    • GSAP Basics (31 minutes)
  3. Timelines and Scroll Trigger
    • Timelines and Scroll Trigger (42 minutes)
  4. Creating a Mouse Effect
    • Creating a Mouse Effect (21 minutes)
  5. Combining Multiple Effects
    • Combining Multiple Effects (1 hour, 27 minutes)
  6. Accessibility
    • Accessibility (45 minutes)
  7. Three.js
    • Three.js (17 minutes)
  8. Wrapping Up
    • Wrapping Up (4 hours, 18 minutes)
Watch online or Download for Free
Build Immersive , Award-Winning Websites by Matias Gonzales

Join us on
  Channel    and      Group

Leave a Comment

Your email address will not be published. Required fields are marked *