강의

멘토링

커뮤니티

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

231 learners

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

Reviews from Early Learners

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

4,477

Learners

234

Reviews

300

Answers

4.9

Rating

5

Courses

 

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

 

Curriculum

All

55 lectures ∙ (13hr 20min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

18 reviews

5.0

18 reviews

  • Taeyoon님의 프로필 이미지
    Taeyoon

    Reviews 7

    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도 기대가되네요!

        • leekj951008님의 프로필 이미지
          leekj951008

          Reviews 3

          Average Rating 5.0

          5

          31% enrolled

          • 미갱이님의 프로필 이미지
            미갱이

            Reviews 16

            Average Rating 5.0

            5

            31% enrolled

            드디어 3편을 수강하게 되었습니다. 다른 강의들은 그냥 따라가기에 바빠서 제대로 개념을 잘 몰랐는데 이 수업으로 ScrollTrigger의 기본부터 알 수 있어서 각 옵션들의 의미와 사용법에 대해 이해할 수 있게 되었습니다. 더불어 자바스크립트도 배울 수 있어서 여러가지로 실력을 업그레이드 할 수 있을 것 같습니다. 다만, 제것으로 만들수 있도록 여러번 복습은 해야할 것 같습니다. 감사합니다!!

            $121.00

            kindtiger's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!