logo
Course

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

0% completed

100%

Chapter 01

Welcome to The Ultimate GSAP Course

  • Welcome to the World of Modern Web Animation

    Free
  • Emotional Design: The Business Value of Animation

    Free

Chapter 02

How To Get the Most out of This Course

  • Meet Adrian, Your Instructor

    Free
  • Get the Most Out of This Course

    Free
  • Access to a Private 24/7 Community

    Free
  • Environment Setup

    Free
  • Our Workflow

Chapter 03

Getting Started with GSAP

  • Your First Animation

  • Committing to GitHub

  • Targeting Elements

  • Understanding properties

  • Understanding methods

  • Getting Started With GSAP Interview

Chapter 04

Easing: Making Animations Feel Natural

  • What is Easing?

  • Power Easing

  • Sine Easing

  • Back Easing

  • Bounce Easing

  • Elastic Easings

  • Expo Easing

Chapter 05

Core Animation Methods

  • Learn to

  • Learn from

  • Learn fromTo

  • Learn Stagger

  • Learn Set

  • GSAP Core Animation Methods Interview

Chapter 06

Timeline

  • Introduction to Timelines

  • Create Your First Timeline

  • Controlling the Timeline – play, pause, reverse, restart

  • Position Parameter

  • Staggered Animations with Timelines

  • GSAP TImelines Interview

Chapter 07

ScrollTrigger

  • Introduction to ScrollTrigger

  • Create Your First ScrollTrigger Animation

  • Scrubbing the Animation

  • Pinning Elements

  • GSAP ScrollTrigger Interview

Chapter 08

Build & Deploy a GTAVI Website | GSAP Course

  • Introduction

  • App Setup & Installation

  • Hero Section

  • FirstVideo

  • Jason Duval

  • SecondVideo

  • Lucia Caminos

  • PostCard

  • Final Video

  • Outro Section

Chapter 09

Emotional Design Case Studies

  • Why companies pay for this skillset

  • How emotional design improves KPI

  • Portfolio projects that showcase this

  • Apple Layered scroll transitions

  • Apple Hero product reveals

  • Subtle easing/timing strategies

  • Duolingo Micro-rewards

  • Habit-forming feedback loops

  • Stripe Button feedback loops

  • Stripe's form field animations that reduce anxiety

  • Revolut's Design for Trust and Premium Feel

  • How Instagram Designs for Dopamine

  • How Phantom Made Crypto Feel Human with Motion

  • Airbnb’s Emotional Animation System

  • GSAP Emotional Design Interview

Course

Environment Setup

Loading...

Environment Setup

Loading...
Loading...
Loading...
    Video thumbnail
    Course icon

    Sign up to watch this lesson (and more).

    By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

    Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

    You'll also be the first to know about upcoming launches, events, and exclusive discounts.

    No spam—just helpful content to level up your skills.

    If that sounds fair, go ahead and log in to continue →

    Enter your name and email to get instant access

    or

    Already have an account? Log in

    0 Comments

    glass-bbok

    No Comments Yet

    Be the first to share your thoughts and start the conversation.

    tick-guideNext Lesson

    Our Workflow

    Before diving into the exciting world of JavaScript, let’s set up your development environment for a seamless learning and development experience.

    1. Choose a Browser

    Since JavaScript runs in the browser, you’ll need one to test your code. If you already have a browser like Chrome, Firefox, or Edge, you’re good to go. However, if you’re looking for something fresh, I recommend trying Arc. Arc is an innovative browser with:

    • A collapsible sidebar for better focus.
    • Customizable spaces to organize work.
    • Full-screen views without the traditional top bar.

    That said, any browser will work perfectly fine for this course, so use the one you’re most comfortable with.

    All browsers offer amazing include developer tools allowing you to do range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.

    You can open dev tools in any browser by right-clicking the site and clicking inspect. You can also use the shortcut: + + (on Mac) or on your keyboard.

    2. Install Node.js

    Although this course doesn’t cover backend development, having Node.js installed is a great idea. It allows you to run JavaScript outside the browser, and it’s a must-have if you plan to explore tools like package managers or frameworks in the future.

    • Head to Node.js and download the latest LTS (Long-Term Support) version.

    • Installation is straightforward and varies slightly based on your operating system.

    3. Install Git

    While it's not mandatory to have Git installed for this course, it's absolutely essential for your growth as a developer. It's non-negotiable.

    You can download Git from it's website.

    And if you haven’t used it before, I’ll link our complete Git and GitHub Course so you can learn how to use them quickly and effectively.

    4. Choose a Code Editor

    Your is where you’ll spend most of your time writing JavaScript.

    Here are two popular options:

    • Visual Studio Code (VS Code): Lightweight, highly customizable, andpacked with features. It’s the editor I’ll use throughout this course.

    Feel free to explore themes to personalize your editor’s appearance. I personally use the Catppuccin Mocha theme for a dark and sleek look.

    5. Keep It Simple

    You don’t need to install every tool or extension right now. Start with the basics and add as you go. The goal is to have an environment that feels intuitive and supports your learning.

    With your environment ready, you’re all set to dive into this course!

    WebStorm: A powerful IDE with features like intelligent code assistance and free access for non-commercial use.

    Arc Browser
    faviconhttps://arc.net/download
    thumbnail