강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

프론트엔드

웹 애니메이션을 위한 GSAP 가이드 Part.02

“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

(5.0) 수강평 30개

수강생 281명

  • 범쌤
gsap
프론트엔드
인터랙티브웹
html/css
인터랙티브 웹JavaScriptHTML/CSS

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • GSAP 사용방법

  • 애니메이션의 이해

  • 웹에 대한 이해

  • HTML 구조

  • GSAP Plugin

다양한 코드, 다양한 애니메이션으로
GSAP 더 멋지게 더 강력하게! 😎

자바스크립트 애니메이션 라이브러리, GSAP

GreenSockAnimationPlatform(GSAP)을 보다 깊게 이해하고, 애니메이션을 체계적으로 구축하고 관리하는 방법에 대해 배워봅니다.

✅ GSAP을 더 잘 쓰고 싶다면!
더 다양한 코드와 애니메이션, 실습 자료까지!

GSAP 더 잘 쓰고 싶은데...
한국어 자료가 너무 없다구요? 🥲

GSAP을 어느 정도 사용해 봤는데, 더 깊게 이해하고 제대로 사용해보고 싶으신가요? 제대로 된 한글 문서나 가이드가 없어서 여전히 어렵게 느껴지시나요? GSAP은 기초 문법만으로도 여러 애니메이션을 넣을 수 있지만, 속성을 깊이 파고 들어가면 갈수록 더욱 더 다양한 애니메이션 핸들링을 할 수 있습니다.

이 강의는 지난 GSAP 기초 강의에서 이어지는 심화편 Part. 02 강의입니다. 기초 강의에서 배운 내용을 그대로 응용해 보다 다양한 코드와 애니메이션을 적용해 볼 수 있도록 구성했습니다.

Animation Controls

👉 GSAP에서 제공하는 다양한 애니메이션 컨트롤 방법을 학습합니다.

DeepDive

👉 자주 쓰이는 애니메이션의 콜백 처리 및 3D 효과를 사용해 GSAP의 도구적 특징을 보다 깊게 이해합니다.

Advanced Stagger

👉 Stagger의 다양한 응용 및 활용 방법과 핸들링에 대해 학습합니다.

Advanced Timeline

👉타임라인을 효율적으로 관리하는 방법과 함수 중심의 애니메이션 설계에 대해 학습합니다.

* 수업 예제인 토이스토리는 고유진님의 디자인 작업물입니다.

잘 알지 못했던 GSAP의 다양한 속성들과 메서드를 경험함으로써 습득력을 높이고, 애니메이션을 체계적으로 구축하고 관리하는 방법을 익혀보세요! GSAP의 기초부터 튼튼히 단계를 밟아 올라간다면, 나중엔 자유롭게 응용하는 순간이 오게 될 겁니다. 😄

강의를 듣고 나면 할 수 있어요!

  • ✅ 애니메이션을 보면 내부적으로 GSAP의 어떤 속성과 메서드가 사용되었는지 유추할 수 있습니다.
  • ✅ 어렵지 않게 만들고 싶은 애니메이션을 그대로 구현해가는 자신을 볼 수 있게 됩니다.
  • ✅ 섹션마다 배운 내용을 응용해 만들어 볼 수 있는 실습 자료가 준비되어 있어요!

💡 Part. 02를 잘 이해하면 앞으로 이어질 Part. 03의 ScrollTrigger 강의에서 얻어갈 내용이 훨씬 많아집니다.


Q&A 💬

Q. 왜 GSAP을 배워야 하나요?

생산성이 중요한 웹 개발자에게 있어 순수 자바스크립트만으로 애니메이션을 구현하는 일은 굉장히 불합리하고 불필요합니다. 이럴 때 잘 만들어져 있는 도구를 사용한다면 더욱 편리하겠죠? 못을 손으로 박지 않고 망치를 사용하는 것처럼 말이죠.

Q. GSAP을 배우면 뭐가 좋은가요?

애니메이션을 분석하는 능력이 생기며, 이렇게 분석한 애니메이션을 아주 쉽게 내 프로젝트에 반영해볼 수 있습니다.

Q. GSAP을 배우면 어떤 일을 할 수 있나요?

모든 웹 작업물에 애니메이션을 넣을 수 있으며, 정적인 웹사이트를 보다 다이나믹하게 연출할 수 있습니다.

GSAP이 처음이라면? 지난 강의 살펴보기

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • GSAP을 알고있지만 보다 깊게 이해하고 싶은 개발자

  • 인터랙티브 웹에 관심있는 개발자

  • 웹 애니메이션을 만들어 보고 싶은 개발자

  • 인터랙티브 웹이 궁금한 디자이너

  • GSAP의 설명이 필요한분

선수 지식,
필요할까요?

  • HTML, CSS, JavaScript

  • 지난 Part.01 강의에서 이어지는 강의입니다.

안녕하세요
입니다.

4,459

수강생

231

수강평

300

답변

4.9

강의 평점

5

강의

 

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

 

커리큘럼

전체

47개 ∙ (12시간 18분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

30개

5.0

30개의 수강평

  • hjux님의 프로필 이미지
    hjux

    수강평 21

    평균 평점 5.0

    5

    100% 수강 후 작성

    受講完了しました!! 😆 前回の基礎パーツに続き、gsapについてもう少し深く取り上げたので、思ったより講義が長かったです。 アニメーションを実装するとき、より多くのヒントと新機能を学ぶことができました。 今回は前回の基礎パーツより各セクションごとに例も多くなり、途中で必要なjsの説明と 受講生の立場で気になるような部分をあらかじめキャッチして説明してくれる部分が良かったです。 いつもバンサムの授業を聞くたびに感じるのですが、簡単で楽しくよく教えてくれると思います。 次のスクロールトリガーレッスンもとても期待されますすぐに出てきてほしい! クラス一つ一つ本当に楽しかったです👍👍 丁寧な講義を作るのに苦労しました。

    • hooncli님의 프로필 이미지
      hooncli

      수강평 50

      평균 평점 5.0

      5

      100% 수강 후 작성

      川の価格が忙しくて購入前に本当に躊躇していましたが、part2の内容が本当にわかりましたのでよく買いました。 gsap プラグイン、メソッド、コールバックなどは基本であり、実習資料で与えられる例やソース自体も活用する部分が多く見えます。 そして、1回完走した感想は、果たしてここで学んだことを積載適所に活用するには、どれほど練習をしなければならないか嬉しくも心配になりますね。 次のスクロールトリガー講義も期待されます。

      • aldald95058004님의 프로필 이미지
        aldald95058004

        수강평 2

        평균 평점 5.0

        5

        100% 수강 후 작성

        1編に続いて2編もあまりにも十分な講義でした

        • zzu님의 프로필 이미지
          zzu

          수강평 2

          평균 평점 4.0

          5

          100% 수강 후 작성

          復習に頻繁に来ます。説明してくれる能力本当に最高です。 講義を聞く前に、gsapの基礎概念もなく、まさに本番で活用されました。 理解度がまったくない状態なのでgsap使ったホームページをたくさん見てフォローしてみても文法が多すぎて混乱してㅠ それでgptに尋ねて作成してほしいと、リファレンスを最初から腹付いて使っていたか、ほぼ底を寄せながらプロジェクトを終えました。 この講義のおかげで、gsapの全体的な理解と応用が可能になりました! gsap 他の先生の講義聞いてみると~こんなことある。ながらスイカの表側式ですっぽり渡って本当に払い戻したい講義がありましたが、、 ボム先生は何が何か一つずつしっかりとわかって理解させようと努力する姿に感動しました。 この先生講義は名講義です、、講義を見るたびに受講料を払わなければならないような気がします。 復習に頻繁に来ます。説明してくれる能力本当に最高です。

          • ekgml52338089님의 프로필 이미지
            ekgml52338089

            수강평 2

            평균 평점 5.0

            5

            32% 수강 후 작성

            理解しやすくて例題が良いです

            ₩156,200

            범쌤님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!