Build Immersive, Award-Winning Websites

Turn heads with high-impact landing pages

Build Immersive, Award-Winning Websites

Why Take This Course?

Learn the Design, Animation, & Performance Techniques to Create Captivating Web Experiences

GSAP Animation Library

Effortlessly animate anything with JS. Use GSAP’s intuitive API to choreograph silky-smooth timeline-based animations

Scroll-Driven Animations

Tell stunning and interactive stories as your users scroll through your website

Three.js & Canvas Drawing

Combine GSAP and Three.js for 3D experiences that leverage the Canvas and WebGL

Accessibility & Performance

Build high-performance animations while keeping the content accessible and tailored to each user’s preferences

What You'll Learn

Everything You Need to Build an Award-Winning Website

24
Lessons
4.3
Hours
4.9
Rating
Certificate of Completion
Learn at Your Own Pace

Whether you want to level up your creative coding skills or are curious how world-class marketing sites combine motion, visuals, and performance, there’s something in this course for you!

  • Master modern animation techniques with GSAP and CSS to create smooth, performant animations
  • Build scroll-based storytelling experiences using GSAP ScrollTrigger to pin elements, animate image sequences, and create dynamic effects that respond to user scrolling behavior
  • Optimize animation performance by leveraging GPU acceleration, managing requestAnimationFrame efficiently, and limiting unnecessary re-renders in React applications
  • Integrate 3D animations seamlessly using Three.js and React Fiber to compose and animate 3D scenes with lighting and camera movements
  • Create accessible, user-friendly animations that respect motion preferences, adapt to device capabilities and battery levels, and maintain high contrast and usability for all users

Create Marketing Pages like Vercel and Apple with these Tools & Techniques

GSAP Animation Timelines, Blender Image Sequences, Three.js Scenes, and More

GSAP Three.js
React Blender
Instructor Matias Gonzales
Matias Gonzales Design Engineer at Vercel

Your (Awesome) Instructor

The best thing you can do at the start of a project is to experiment. Share your prototypes early to validate ideas as quickly as possible.

A Decade of Experience with Animation, 3D, and WebGL

Matias Gonzalez is a creative problem solver with a portfolio filled with high-profile, immersive experiences.

Design Engineer at Vercel

Pushing the limits of the browser at Vercel developing award-winning product landing pages

basement studios

Built high-impact experiences for Mr. Beast, Cursor, and Daylight

Experiements

Always finding room to play and experiment with new technologies and is currently obsessed with WebGL

Introduction
11 minutes
GSAP Basics
31 minutes
Timelines and Scroll Trigger
42 minutes
Creating a Mouse Effect
21 minutes
Combining Multiple Effects
1 hour, 27 minutes
Accessibility
45 minutes
Three.js
17 minutes
Wrapping Up
4 hours, 18 minutes
Frontend Masters course player

Best in Class Course Player

Your Learning Adventure Begins Here

  • Course Progress: Learn at your own pace and pick up right where you left off.
  • Robust Note-Taking: Take notes alongside transcripts to easily reference information while learning.
  • Quizzes & Flashcards: Reinforce your learning with quizzes and flashcards after every lesson.
Sample completion certificate

Earn a Completion Certificate

After completing this course, you'll receive a certificate of completion that serves as proof of your achievement, showcasing your expertise, and commitment to professional development. You can easily share this certificate on your LinkedIn profile to highlight your new skills and demonstrate continuous learning to potential employers and professional connections.

Get Started with Award-Winning Marketing Websites and Much More

  • 250+ In-depth Courses
  • 24 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops