BEST

Front-end

GSAP Guide for Web Animation Part.03

Name: GSAP Guide for Web Animation Part.03
Price: 156200 KRW
Rating: 4.9 (22 reviews)

The flower of web animation, scroll animation! Learn about ScrollTrigger, which allows you to use GSAP more powerfully.

(4.9) 22 reviews

241 learners

Level Basic

Course period Unlimited

kindtiger

scrolltrigger

gsap

Interactive Web

JavaScript

Animation

scrolltrigger

gsap

Interactive Web

JavaScript

Animation

Reviews from Early Learners

4.9

5.0

Taeyoon

100% enrolled

I listened to it and it was very useful and fun. I was thinking of making a portfolio to change jobs anyway, I plan to make a good portfolio site by utilizing gsap as much as possible. I plan to listen to the SVG lecture next time. Thank you. If you plan to give a React lecture later, I would appreciate it if you could show me how to use it by mixing it with Gsap.

5.0

한봉경

100% enrolled

1-3 I completed them all! Honestly, I think you're a genius if you listen to them once and understand them all. ㅠㅠ But if you just kept on studying until the end, you'll be able to see the big picture of GSAP! I'm going to practice and utilize them by reading them in between whenever necessary in my work! The ignorant fear I had when I first encountered GSAP has largely disappeared, and I'm satisfied with myself for being able to handle it naturally. Thank you!!

5.0

뽀로링

100% enrolled

I completed Part 1 to Part 3. They were all full of useful content. There are really few lectures on scrollTrigger in Korea, but thanks to this, I was able to create the interactive portfolio I wanted and successfully transfer to the place I wanted! Thank you for uploading such a great lecture. I'm looking forward to the next Part 4!

What you will gain after the course

How to use GSAP
Understanding Scroll Animation
Utilizing GSAP

The flower of GSAP animation, Scroll Trigger
Completely organized from principles to applications!

GSAP, a JavaScript animation library

Gain a deeper understanding of GreenSockAnimationPlatform (GSAP) and learn how to systematically build and manage animations.

✅ If you want to use GSAP better!
✅ More code, animations, and practice materials!

GSAP scroll animation?
I'll make it so you can say, "It's nothing special!"

“I tried using ScrollTrigger roughly, but I don’t know how to apply it 😥”

👉 Don't worry! I'll help you learn scroll animation and ScrollTrigger properly!

Have you used GSAP for some time, but want to understand it more deeply and use it more effectively? Still feeling overwhelmed by the lack of proper Korean documentation or guides? GSAP allows you to add various animations with just basic syntax, but as you delve deeper into its properties, you'll be able to handle an ever-increasing variety of animations.

This lecture is Part 3 of GSAP, a continuation of Part 1 and Part 2. Learn scroll animation, an essential element of interactive web design , by actively utilizing GSAP features!

Attention, these people!

Developers who want to learn ScrollTrigger properly
Designers curious about scroll animation
Developers interested in web animation

I will solve your problems.

Just creating a UI? A course that teaches you the fundamentals.
This is not a lecture that just explains the theory, but rather a lecture that provides rich explanations and code levels that can be applied directly to practice.
A lecture that covers the JavaScript content required for GSAP.
Provides practice sections to practice each section
A series of lectures that connect to Part 1 and Part 2

_{Learn about ScrollTrigger basic syntax and animation.}

_{Create a single web page animation based on basic theory.}

_{Learn how to proxy (bypass) smooth scrolling, a must-have feature of the interactive web, for free.}

_{Learn about ScrollTrigger CallBacks for detailed animation control.}

_{Learn how to prevent scrolling and control animations.}

_{Learn how to animate UI as it scrolls.}

_{Learn how to toggle animations on scroll.}

_{Based on what you've learned, you'll create a complete website animation.}

_{Learn about animations that can control video playback based on scroll values.}

_{Learn how to create dynamic text animations using text plugins and manage them for responsiveness.}

_{Control how SVGs are drawn on scroll with the plugin.}

_{Learn how Single Page Applications (SPA), a staple of interactive web development, work and how to connect ScrollTrigger.}

_{Learn how to implement a horizontal layout and how to integrate it with ScrollTrigger.}

_{Learn how to implement a layout with mixed horizontal and vertical orientations and how to integrate ScrollTrigger.}

_{Learn how to set up animations that behave differently for different ViewPorts.}

_{Learn about Reduced-motion, which improves accessibility and provides an environment where users can turn animations on and off.}

You can do it after taking the class!

✅ You will find out that animations you see on other sites work this way .
✅ You will be able to see yourself implementing the animation you want to create without difficulty.
✅ Practice materials are provided for each section so you can apply what you've learned!

Q&A 💬

Q. What can I do if I learn GSAP ScrollTrigger?

You can freely apply animations anywhere on your website that requires scrolling.

Q. Is there anything I need to prepare before attending the lecture?

Basic knowledge of JavaScript and a level of prior knowledge equivalent to that of Part 1 and Part 2 of the course are required.

Q. What level of content is covered in the class?

This is not a lecture that simply explains the functions, but rather one that progresses to a level where you can understand the core and apply it immediately in practice.

💾 Guide to the practice environment and learning materials

You can learn on Windows and macOS environments.
In this course, we will use Visual Studio Code.
Prerequisite knowledge is a curriculum level understanding of the previous Part 1 and Part 2 lectures and familiarity with JavaScript.
Students will be provided with Notion documents and practice files. Learning materials are only visible to enrolled students.

New to GSAP? Check out past lectures.

Recommended for
these people

Who is this course right for?

Developers who want to learn GSAP
Designers curious about web animation
Developers curious about scroll animation

Need to know before starting?

GSAP Guide for Web Animation Part 1
GSAP Guide for Web Animation Part 2
HTML/CSS
JavaScript

Hello
This is kindtiger

Career Verified

4,816

Learners

274

Reviews

313

Answers

4.9

Rating

Courses

Hello, I'm Beom-ssaem, an instructor who enjoys creating lectures on design and development 🙂 For online/offline lecture inquiries, please contact me at seonbeom2@gmail.com 🙇‍♂

Curriculum

All

55 lectures ∙ (13hr 20min)

Course Materials:

Lecture resources

Section 1. Intro

3 lectures ∙ (28min)

Section 2. Basic Trigger

12 lectures ∙ (2hr 41min)

4. Preferences
08:37
5. Basic Trigger (1)
11:27
6. Basic Trigger (2)
09:59
7. Scrub (1)
15:50
8. Scrub (2)
20:44
9. Pin (1)
13:33
10. Pin (2)
11:18
11. Parallax (1)
13:00
12. Parallax (2)
10:33
13. Practice (1)
19:42
14. Practice (2)
10:52
15. Practice (3)
16:08

Section 3. Advanced Trigger

16 lectures ∙ (3hr 55min)

16. Proxy (1)
16:38
17. Proxy (2)
13:43
18. Proxy (3)
19:42
19. Callback
19:55
20. PreventScroll
16:50
21. FastScrollEnd
19:13
22. Navigation Loop (1)
15:23
23. Navigation Loop (2)
12:36
24. Scroll Based Progress (1)
16:37
25. Scroll Based Progress (2)
16:14
26. Animation Toggle (1)
10:09
27. Animation Toggle (2)
09:39
28. Practice (1)
13:48
29. Practice (2)
13:00
30. Practice (3)
09:36
31. Practice (4)
12:30

Section 4. Trigger with Plugin

12 lectures ∙ (3hr 16min)

Section 5. Layout

8 lectures ∙ (2hr 9min)

Section 6. Responsive & a11y

3 lectures ∙ (47min)

Section 7. In conclusion

1 lectures ∙ (2min)

Published: 10/25/2023

Last updated: 05/13/2025

Reviews

All

22 reviews

4.9

22 reviews

taeyoongo007
Reviews 9
∙
Average Rating 5.0
12/17/2024
5
100% enrolled
I listened to it and it was very useful and fun. I was thinking of making a portfolio to change jobs anyway, I plan to make a good portfolio site by utilizing gsap as much as possible. I plan to listen to the SVG lecture next time. Thank you. If you plan to give a React lecture later, I would appreciate it if you could show me how to use it by mixing it with Gsap.
bkman10046536
Reviews 3
∙
Average Rating 5.0
11/18/2024
5
100% enrolled
1-3 I completed them all! Honestly, I think you're a genius if you listen to them once and understand them all. ㅠㅠ But if you just kept on studying until the end, you'll be able to see the big picture of GSAP! I'm going to practice and utilize them by reading them in between whenever necessary in my work! The ignorant fear I had when I first encountered GSAP has largely disappeared, and I'm satisfied with myself for being able to handle it naturally. Thank you!!
twkim94
Reviews 3
∙
Average Rating 5.0
08/11/2024
5
100% enrolled
I completed Part 1 to Part 3. They were all full of useful content. There are really few lectures on scrollTrigger in Korea, but thanks to this, I was able to create the interactive portfolio I wanted and successfully transfer to the place I wanted! Thank you for uploading such a great lecture. I'm looking forward to the next Part 4!
recgrnd
Reviews 2
∙
Average Rating 5.0
01/26/2026
5
100% enrolled
I enjoyed the course and found it helpful to pick and choose the specific parts I needed. While listening to the lectures, there was some confusion because the GSAP website changed following a company transition, but I liked it even more because all the plugins are now free.
sunburst773181
Reviews 16
∙
Average Rating 5.0
10/13/2025
5
31% enrolled
I finally got to take part 3. With other lectures, I was just busy trying to keep up and didn't really understand the concepts properly, but through this class I was able to learn ScrollTrigger from the basics, so I could understand the meaning and usage of each option. Additionally, I was able to learn JavaScript as well, so I think I'll be able to upgrade my skills in various ways. However, I think I'll need to review it several times to be able to make it my own. Thank you!!

kindtiger's other courses

Check out other courses by the instructor!

Claude Design: Easy to Learn Even for Non-Majors

kindtiger

Even if you are not a major or a designer, you will learn how to directly create and modify web UIs, proposals, and design systems using Claude Design and Figma. To ensure immediate application in practice, the course proceeds step-by-step with a focus on hands-on practice—covering everything from the differences between Claude Code and Claude Design to installation, plugin utilization, component-based UI production, design modification, and methods for applying them to live services. This lecture is designed to help developers, planners, and marketers who found design tools difficult to experience rapid result-making through AI and component-based workflows.

Beginner

Figma, terminal, figma-plugin

Claude Design: Easy to Learn Even for Non-Majors

kindtiger

GSAP Guide for Web Animation Part.02

kindtiger

“GSAP is capable of this?” Breaks the stereotype that animation is complex and difficult.

Basic

gsap, Interactive Web, JavaScript

GSAP Guide for Web Animation Part.02

kindtiger

GSAP Guide for Web Animation Part.01

kindtiger

GSAP will take you one step closer to interactive web development and change the way you look at animation.

Basic

gsap, Interactive Web, JavaScript

GSAP Guide for Web Animation Part.01

kindtiger

Design System with Figma

kindtiger

Through this course, you will build a design system and experience the explosive synergy of your design work.

Basic

Figma, Figma Tokens, Design System

Design System with Figma

kindtiger

Similar courses

Explore other courses in the same field!

GSAP Guide for Web Animation Part.02

kindtiger

“GSAP is capable of this?” Breaks the stereotype that animation is complex and difficult.

Basic

gsap, Interactive Web, JavaScript

GSAP Guide for Web Animation Part.02

kindtiger

GSAP Guide for Web Animation Part.01

kindtiger

GSAP will take you one step closer to interactive web development and change the way you look at animation.

Basic

gsap, Interactive Web, JavaScript

GSAP Guide for Web Animation Part.01

kindtiger

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

Basic

HTML/CSS, jQuery, JavaScript

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

[Code Camp] Highly concentrated backend course created at boot camp

codecamp

This is a curriculum full of Captain's personal feelings, an 8-year full-stack developer who fell in love with coding. It is filled with Captain's desire to teach everything about the backend! As you listen to this lecture, you will find yourself thinking, 'Does he really teach this much?' Let's start with this lecture that thoroughly explains even the parts that everyone finds difficult.

Beginner

NestJS, Node.js, JavaScript

[Code Camp] Highly concentrated backend course created at boot camp

codecamp

Learning interactive web while making web games! JAVASCRIPT

ggangcoding162118

A three-in-one class where you can create web games and learn front-end web development skills! This class has been created to teach you how to create games using JavaScript, CSS, and HTML with your own ideas!

Basic

Interactive Web, JavaScript, HTML/CSS

Learning interactive web while making web games! JAVASCRIPT

ggangcoding162118

Redis from a Kakao Interviewer Who Handles 500,000+ Traffic per Second

Hong

You may have felt frustrated using Redis without being able to explain why it should be designed that way or why certain patterns emerged. Through my experience in both practical development and as an interviewer, I have treated Redis not just as a simple cache, but as a core component that determines service stability and scalability. This course is not about memorizing commands; instead, I will share my experiences on which structures to choose in real traffic environments and their trade-offs, helping you establish the criteria to explain these concepts confidently in both interviews and practical work.

Beginner

JavaScript, Docker, Redis

Redis from a Kakao Interviewer Who Handles 500,000+ Traffic per Second

Hong

Create your creative web: Parallax ScrollTrigger Master Class

webstoryboy

Many websites are using Parallax ScrollTrigger to create cool effects. Let’s use this library to create creative and impressive web pages.

Basic

gsap, parallax, scrolltrigger

Create your creative web: Parallax ScrollTrigger Master Class

webstoryboy

Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]

funcoding

This is a full-stack series course aimed at developing web and app services at a commercially viable level for beginners, based on real-world experience developing web services in the field. As Part 2 of this series, this course thoroughly covers the latest HTML5, CSS3, and vanilla JavaScript + ES6, considering responsiveness and compatibility among the various frontend technologies available.

Beginner

HTML/CSS, JavaScript, ES6

Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]

funcoding

Hands-on Responsive Web Development with Pure HTML/CSS/JS Bootcamp

youngcodikimssam

A practical production class on creating responsive web pages that can implement various layouts for each device using only pure HTML/CSS/JS without using Bootstrap [2024 Latest Edition].

Basic

HTML/CSS, Responsive Web, Interactive Web

Hands-on Responsive Web Development with Pure HTML/CSS/JS Bootcamp

youngcodikimssam

Web Programming (HTML5+CSS+javaScript)

software25766

This is a web programming course for beginners. It is designed to help you learn the basic grammar and usage of HTML, CSS, and JavaScript step by step. It covers the core elements of web development, such as web page structure and design, and implementation of interactive features.

Beginner

HTML/CSS, JavaScript, Responsive Web

Web Programming (HTML5+CSS+javaScript)

software25766

SVG Multi-Stroke Scroll Animation

dunopi

Draw simple pictures using SVG and apply them to your site. Applying this to your portfolio will make your page stand out.

Basic

HTML/CSS, JavaScript

SVG Multi-Stroke Scroll Animation

dunopi

JavaScript Machine Learning TensorFlow.js

tonextday

It covers machine learning concepts within the JavaScript environment. It covers the patterns and code for implementing machine learning with JavaScript and TensorFlow.js.

Intermediate

Tensorflow, JavaScript, Machine Learning(ML)

JavaScript Machine Learning TensorFlow.js

tonextday

Want a fuse study [Wonhada]

gcc

Create iOS and Android apps quickly and easily using JavaScript and XML.

Intermediate

JavaScript, XML

Want a fuse study [Wonhada]

gcc

Modern JavaScript (ES6+) Basics

tonextday

This is the third course in a four-part JavaScript Bible series. It covers more than 95% of the JavaScript specification. You will be able to develop programs with a new paradigm in an ES6+ environment.

Basic

JavaScript, ES6

Modern JavaScript (ES6+) Basics

tonextday

Web browser Javascript

Egoing Lee

This is a Life Coding JavaScript course. We will study the JavaScript reference that allows you to directly control the web browser.

Basic

JavaScript

Web browser Javascript

Egoing Lee

Creating a Web Portfolio for UI/UX Designer Employment: Personal Branding Strategy

jyoung

"2026 UIUX Designer | Coding Designer Agency Pass Portfolio Reveal" This is a practical lecture on creating a UIUX web portfolio that catches the interviewer's eye. The curriculum is designed not just for simple portfolio creation, but to enhance your competitiveness as a UIUX designer with differentiated results utilizing interactions.

Basic

HTML/CSS, JavaScript, Web Application

Creating a Web Portfolio for UI/UX Designer Employment: Personal Branding Strategy

jyoung

P2P Communication Using WebRTC That No One Tells You About

July

You can learn about implementing webcam and peer-to-peer communication using WebRTC.

Beginner

Go, webrtc, p2p

P2P Communication Using WebRTC That No One Tells You About

July

Web Design Engineer Public Questions You Must See Before the Exam (2020) Part 1

usefulit

This is a lecture that teaches the basics for preparing for the web design technician practical exam through open questions. It is also a useful lecture for web designers who want to utilize web coding in their work.

Basic

HTML/CSS, JavaScript

Web Design Engineer Public Questions You Must See Before the Exam (2020) Part 1

usefulit

A real introductory all-in-one development boot camp for non-majors

grab

The ultimate full-stack course that teaches even beginners about web, server, mobile apps, and machine learning!! If you're not sure where to start with development, I highly recommend this course. It's all done with just Javascript!

Beginner

JavaScript, React, Node.js

A real introductory all-in-one development boot camp for non-majors

grab

[Code Factory] [Introduction] Complete Code Factory's Javascript full course in just 9 hours

codefactory

With this one course, you can learn the basics of popular Javascript frameworks and Typescript.

Beginner

JavaScript

[Code Factory] [Introduction] Complete Code Factory's Javascript full course in just 9 hours

codefactory

GSAP Guide for Web Animation Part.03

4.9

What you will gain after the course

GSAP, a JavaScript animation library

GSAP scroll animation? I'll make it so you can say, "It's nothing special!"

Attention, these people!

I will solve your problems.

You can do it after taking the class!

Q&A 💬

New to GSAP? Check out past lectures.

Recommended for these people

HelloThis is kindtiger

Curriculum

Reviews

kindtiger's other courses

Similar courses

GSAP scroll animation?
I'll make it so you can say, "It's nothing special!"

Recommended for
these people

Hello
This is kindtiger