Skip to main content

Web Animations Full Course | Build a GTA VI Website & Master GSAP

3h 31m 47s
English
Paid

More than 70% of leading design-oriented companies utilize GSAP in production. With this course, you will not only comprehend their methodology but also master the tools necessary to collaborate with them or create your own animations at the level of global brands.

Why This Course Benefits You

  • Create animation portfolios recognizable by creative agencies and IT brands.
  • Differentiates you among designers and front-end developers.
  • Transform creative interfaces into tangible orders, proposals, and freelance projects.

Master In-Demand Animation Skills

You'll learn to create not just "beautiful effects," but commercial-ready animations: smooth scrolling, micro-animations that evoke a dopamine response, and functional emotional design.

Our exploration includes:

  • Gaining user trust like Stripe.
  • Captivating audiences like Duolingo.
  • Stimulating purchase desires like Apple.

Project: Create a GTA VI Landing Page

Through this project, you will construct an authentic GTA VI landing page, mastering:

  • Activating videos as you scroll.
  • Narrating stories through motion.
  • Developing premium interactive sections.
  • Implementing scroll-driven video transitions.
  • Crafting multi-layered animations and parallax effects.
  • Cinematic storytelling using timelines.

Interactive Learning: Code Alongside Lessons

Each lesson provides not just a video but an interactive coding experience:

  • Built-in playground components.
  • Smooth demonstrations with live sliders.
  • On-the-spot editing of GSAP animations.
  • Visual learning for enhanced repetition.

Engage with Real Projects and Interfaces

No abstractions—only tangible interfaces from top-tier products:

  • Animate a MacOS-style dock panel.
  • Create switchable navigation with sticky effects.
  • Design Facebook-like reactions.
  • Develop card animations, graphs, loaders, toasts, and more.

About the Authors

Adrian Hajdin

Adrian Hajdin thumbnail
Adrian is a Software Engineer who specializes in education. Being experienced in an abundance of technologies he's helped thousands of people become professional developers. He's a proud founder of the JavaScript Mastery brand and the associated YouTube channel.

jsmastery.pro

jsmastery.pro thumbnail
Master Modern Web Development With a Project Based Approach. Gain real-world experience and land that dev job you've always imagined.

Watch Online 31 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 31 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 001 Welcome to the World of Modern Web Animation
All Course Lessons (31)
#Lesson TitleDurationAccess
1
001 Welcome to the World of Modern Web Animation Demo
04:18
2
002 Prerequisites
01:14
3
003 Emotional Design The Business Value of Animation
03:27
4
004 Meet Adrian, Your Instructor
01:51
5
005 Get the Most Out of This Course_
03:14
6
006 Access to a Private 24-7 Community
01:19
7
007 Environment Setup
02:54
8
008 Our Workflow
06:37
9
009 Your First Animation
08:56
10
010 Committing to GitHub
04:26
11
011 Understanding properties_
12:56
12
012 Understanding methods
08:43
13
013 What is Easing_
00:25
14
014 Sine Easing
07:44
15
015 Back Easing
07:16
16
016 Elastic Easings
05:30
17
017 Expo Easing
06:56
18
018 Learn to
05:13
19
019 Learn from
05:28
20
020 Learn fromTo_
03:39
21
021 Learn Set
03:18
22
022 Introduction
01:13
23
023 App Setup & Installation
13:03
24
024 Hero Section
32:33
25
025 FirstVideo
09:21
26
026 Jason Duval
11:21
27
027 SecondVideo
08:02
28
028 Lucia Caminos
10:15
29
029 PostCard
06:52
30
030 Final Video
05:04
31
031 Outro Section
08:39
Unlock unlimited learning

Get instant access to all 30 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription