강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

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) 16 reviews

223 learners

  • kindtiger
실습 중심
gsap
웹페이지
스크롤이벤트
scrolltrigger
Interactive Web
JavaScript
Animation

Reviews from Early Learners

What you will learn!

  • 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

4,393

Learners

222

Reviews

292

Answers

4.9

Rating

5

Courses

 

---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇‍♂

 

Curriculum

All

55 lectures ∙ (13hr 20min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

16 reviews

5.0

16 reviews

  • Taeyoon님의 프로필 이미지
    Taeyoon

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    너무 유익하고 재밌게 잘 들었습니다. 아무래도 이직하기 위해 슬슬 포트폴리오 만들 생각이였는데 최대한 gsap를 활용해서 좋은 포폴 사이트 만들 예정입니다. 다음에 svg 강의도 들을 예정입니다. 감사합니다. 추후에 리엑트 강의등 하실 계획 있으시면 Gsap도 함께 섞어서 어떻게 사용해서 보여주실 수있는지도 보여주시면 감사합니다.

    • 한봉경님의 프로필 이미지
      한봉경

      Reviews 3

      Average Rating 5.0

      5

      100% enrolled

      1-3 전부 완강했습니당! 솔직히 한번 듣고 다 이해한다면 천재라고 생각해요 ㅠㅠ 그래도 무작정 계속 끝까지 완강해보니 대략적인 GSAP의 큰그림을 볼 수 있었어요! 실무에서 필요할 때마다 중간중간 회독하면서 연습해보면서 활용해보려 합니다! 처음 gsap을 접했을 때 다가왔던 무지성 공포감은 많이 없어진 상태이고, 자연스럽게 만질 수 있는 제 자신이 만족스럽습니다 ㅎ 감사합니당!!

      • 뽀로링님의 프로필 이미지
        뽀로링

        Reviews 3

        Average Rating 5.0

        5

        100% enrolled

        파트1 부터 파트3 까지 완강했습니다. 모두 알찬 내용들로만 가득했습니다. scrollTrigger 관련한 강의는 한국에 정말 몇 없는데, 덕분에 원하던 인터랙티브한 포트폴리오를 제작해 원하는 곳으로 이직 성공했습니다! 좋은 강의 올려주셔서 감사합니다. 다음 파트4도 기대가되네요!

        • gangsugi님의 프로필 이미지
          gangsugi

          Reviews 21

          Average Rating 5.0

          5

          93% enrolled

          part1을 듣고 바로 part3를 들었지만 자세한 설명으로 어렵지 않게 완강을 했습니다. 대략적인 부분만 알고 있었는데 강의를 들으면서 좀더 상세하게 알게 되었습니다. 설명도 너무 잘 하시고 강의 만드실때 정성이 많이 들어갔다는게 팍팍 느껴집니다. 좋은 강의 잘 들었구요, part4도 나오면 꼭 듣겠습니다^^

          • foxball님의 프로필 이미지
            foxball

            Reviews 32

            Average Rating 4.8

            5

            16% enrolled

            gsap의 기능들을 익혀보려고 영어로된 유튜브 강좌만 보다가 범쌤님의 파트1~파트3 강좌를 듣게되었습니다. 결론부터 말씀드리면 gsap 종결 강의 입니다. 더이상 다른곳에서 헤매실필요 없습니다. gsap 에서 새로운 기능이 나오면 모를까 현재까지 나온 강의중에 최고의 강의입니다. 간지러운곳을 미리 긁어주는 느낌이랄까요 강좌 하나하나가 머릿속을 꽉채우고 지식을 머리에 넣고있는 느낌입니다. 더이상 말로 설명드리기가 어렵네요~~

            $121.00

            kindtiger's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!