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

3h 31m 47s
English
Paid

Course description

More than 70% of leading design-oriented companies use GSAP in production. Now you will be able not only to understand their approach, but also to master the tools to work with them or create your own animations at the level of global brands.

Read more about the course

What this means for you:

  • Create animation portfolios that are clear to creative agencies and IT brands
  • Stand out among designers and front-end developers
  • Turn creative interfaces into real orders, offers, and freelance projects

Master animations that businesses pay for

You will learn to create not just "beautiful effects," but selling animations: smooth scrolling, micro-animations that trigger a dopamine response, and emotional design that works.

We will explore how to:

  • Earn user trust like Stripe does
  • Engage the audience like Duolingo
  • Inspire a desire to buy like Apple

Project: GTA VI landing page from scratch

You will recreate a real GTA VI landing page, learning:

  • Video activation on scroll
  • Narration through motion
  • Premium-level interactive sections
  • Scroll-driven video transitions
  • Multi-layered animations and parallax effects
  • Cinematic storytelling with timelines

Learn through practice: live code right in the lessons

Each lesson is not just a video but also interactive work with code:

  • Built-in playground components
  • Smoothing demonstrations + live sliders
  • Instant editing of GSAP animations
  • Repetition through visual learning

Real projects. Real interfaces.

No abstraction - only real interfaces that you have seen in the best products:

  • Animated dock panel in MacOS style
  • Switchable navigation with a sticky effect
  • Facebook-like reactions
  • Card animations, graphs, loaders, toasts, and much more

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Remix Bootcamp: Zero to Mastery

Remix Bootcamp: Zero to Mastery

Sources: zerotomastery.io
Join Remix Bootcamp to master full-stack web development. Learn from industry experts to build better websites and advance your career in web development
21 hours 2 minutes 22 seconds
HTMX - The Practical Guide

HTMX - The Practical Guide

Sources: Academind Pro
Are you tired of picking the right JS library from a vast sea of libraries? And do you sometimes feel like frontend JavaScript development & code became unnecessarily complex? H...
4 hours 5 minutes
Mocking Techniques in Vitest

Mocking Techniques in Vitest

Sources: Artem Zakharchenko
Let's admit it, mocking can be really confusing. First, you need to understand what exactly to mock. Then, find the right way to do it so it doesn't worsen...
1 hour 30 minutes 36 seconds
Full-Stack Fundamentals 1 - Frontend

Full-Stack Fundamentals 1 - Frontend

Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds