Design System with Figma
kindtiger
Through this course, you will build a design system and experience the explosive synergy of your design work.
초급
Figma, Figma Tokens, Design System
BEST
GSAP Guide for Web Animation Part.03
The flower of web animation, scroll animation! Learn about ScrollTrigger, which allows you to use GSAP more powerfully.
(5.0) 20 reviews
237 learners
Level Basic
Course period Unlimited
scrolltrigger
scrolltrigger
gsap
gsap
Interactive Web
Interactive Web
JavaScript
JavaScript
Animation
Animation
scrolltrigger
scrolltrigger
gsap
gsap
Interactive Web
Interactive Web
JavaScript
JavaScript
Animation
Animation
Reviews from Early Learners
Reviews from Early Learners
5.0
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
4,524
Learners
241
Reviews
305
Answers
4.9
Rating
5
Courses
Hello, I'm Beom-ssam, an instructor who enjoys creating lectures on design and development 🙂 ----------------------------------------------------- For online/offline lecture inquiries, please contact se
---Hello, I'm Beom-ssam, an instructor who enjoys creating lectures on design and development 🙂 -----------------------------------------------------For inquiries regarding online/offline lectures, please contact seonbeom2@gmail.com 🙇♂
I am Teacher Beom, creating lectures with passion 🙂 ----------------------------------------------------- For inquiries regarding online/offline lectures, please contact seonbeom2@gmail.com 🙇♂
Curriculum
All
55 lectures ∙ (13hr 20min)
Course Materials:
Lecture resources
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
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
28. Practice (1)
13:48
29. Practice (2)
13:00
30. Practice (3)
09:36
31. Practice (4)
12:30
Published:
Last updated:
Reviews
All
20 reviews
5.0
20 reviews
taeyoongo007Reviews 7
∙
Average Rating 5.0
5
100% enrolledI 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
5
100% enrolled1-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
5
100% enrolledI 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
- jiy91471596
Reviews 2
∙
Average Rating 5.0
$121.00
kindtiger's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![[Web Development Full Stack Course] From Pure JavaScript Basics to Practice강의 썸네일](https://cdn.inflearn.com/public/courses/330076/cover/e46f4bde-0146-42d6-a2fa-64d9bd510d27/vanila-javascript-1)
![[Code Factory] [Beginner] NestJS REST API Backend Complete Conquest Master Class - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
![Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![[Code Camp] Highly concentrated backend course created at boot camp강의 썸네일](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?f=avif&w=420)