BEST

Programming

Front-end

WebアニメーションのためのGSAPガイドPart.01

Name: WebアニメーションのためのGSAPガイドPart.01
Price: 44000 KRW

GSAPを使用すると、インタラクティブWeb開発に一歩近づくことができ、アニメーションの視点が変わります。

（5.0）受講レビュー 61件

受講生 638名

kindtiger

프론트엔드

front-end

gsap

애니메이션

Interactive Web

JavaScript

HTML/CSS

学習した受講者のレビュー

こんなことが学べます

GSAPの使い方
アニメーションの理解
Webの理解
HTML構造
GSAPプラグイン

コアをつかむGSAP！
インタラクティブウェブ、はるかに簡単で便利です🌠

ウェブ上で素晴らしいアニメーションを？
JavaScript GSAPを正しく起動する

_{GSAPを使用して作成したBridgeクローンコーディングページ。 (リンク)}

インタラクティブウェブに興味をお持ちですか？ JavaScriptを使って素晴らしいWebアニメーションを実装したいですか？デザインと開発、両方の楽しみを見逃すことはできませんか？ GSAPはまさにそのような人のための画期的なプラットフォームです。

JavaScriptのアニメーションライブラリ、GSAP

GreenSockによって作成されたGSAPは、フロントエンド開発者、UIデザイナーなどがJavaScriptで簡単かつ便利にアニメーションを作成できるアニメーションプラットフォームです。

✅インタラクティブウェブに興味があればOK！
✅ HTML、CSS＆JavaScriptを書くことを知っている誰でも！

ところで…GSAPのあまりにも強力な魅力にもかかわらず、いざGSAPを書こうと思うのは容易ではありません。
まさにきちんとしたハングル文書や学習資料を見つけるのが難しいからです。

しかし同時に、GSAPはユーザーの便宜のためにさまざまな機能を提供しています。
そのため、コア機能だけを正しく習得すれば、誰でも簡単に活用できるようになります。

この講義を通して、多くの人がGSAPとインタラクティブなWeb開発の魅力に夢中になることを願っています！

最も簡単で楽しく学ぶ
GSAPガイドA to Z

基本を丈夫に

_{コア機能を理解しやすいように
パートごとに一つ一つ分けて説明します。
（Tween、Timeline、Keyframe...）}

実習も自信を持って

_{講義を終えた後に実習してみることができる
環境と課題を提供します。
(ノッション環境文書およびタイムライン資料)}

初心者でも心配なく

_{HTML/CSS + JS基礎だけを知っても
十分に学習できます。
（CSS、JSを深く知ればさらに良いです！）}

💡 GSAPを学んだら？アニメを見る視点が変わります！

かつては「わ～きれい」くらいだけ見て感じたウェブアニメの原理が見えます。講義を聞いたら、同じアニメーションを見ても「どんなメソッドにどんな属性を使ったのか、それぞれのディレイ時間は何秒ぐらいだろうか」までも十分考えて、直接実装できるようになります。

カリキュラム
確認してみてください。

What is GSAP?

GSAPはGreenSockによって作成されたアニメーションプラットフォームで、JavaScriptで制御できるすべての要素にアニメーションを適用できます。（CSSプロパティ、SVG、React、Canvas、Normal Objectなど...）また、多数のブラウザのクロスブラウジングをサポートし、jQueryに比べて最大20倍の高速パフォーマンスを提供します。

GSAPコアを理解する

GSAP オブジェクトが持っている Property と Method を GreenSock 公式ドキュメントを直接確認しながら学習します。

Tweenを理解する

基本的なアニメーションが適用される原理を学習し、Tweenを使って簡単なアニメーションを直接構成します。

タイムラインを理解する

タイムラインを活用してアニメーションのタイムフローを制御し、制御する方法を学びます。

最終結果

アニメーション化されたWebページイントロを直接作成します。

💾 受講環境と学習資料のご案内

レッスンでは、オンラインベースのコードエディタであるCodePenを使用し、Windows / macOS環境の両方を学習できます。
学習資料はノッション文書として提供されます。 (セクション 0 - 環境設定クラスノート)
簡単なHTML、CSS、JavaScriptの基本を知っている必要があります。

Q&A 💬

Q. なぜGSAPを学ぶべきですか？

生産性が重要なWeb開発者にとって、純粋なJavaScriptだけでアニメーションを実装することはとても不合理で不要です。こういうときによく作られているツールを使うともっと便利でしょうか？釘を手で打つことなくハンマーを使うようなものです。

Q. GSAPを学ぶと何がいいですか？

アニメーションを分析する能力が生まれ、このように分析したアニメーションを非常に簡単に自分のプロジェクトに反映してみることができます。

Q. GSAPを学ぶことで何ができますか？

このクラスを受講してすぐにインタラクティブWebを作成することはできません。ただ基礎コアを固める授業なので、基本基をしっかり学ぶという考えで受講すれば役に立ちます:)

Q. 講義を聞く前に準備すべきことはありますか？

HTML、CSS、JavaScriptのプレイヤーの知識を学び、来るのは良いことです。よく知らなくても従うことはできますが、知って聞くと理解の幅がはるかに広がります。

Q. 授業内容をどのレベルまで扱いますか？

パート1はGSAP基礎クラスです。 GSAP基礎文法と機能に焦点を当てて講義を進めます。

こんな方に
おすすめです

学習対象は
誰でしょう？

Webにアニメーションを入れたい開発者
GSAPを正しく使用したい開発者
Webアニメが気になるデザイナー

前提知識、
必要でしょうか？

HTML
CSS
JavaScript

こんにちは
です。

4,393

受講生

222

受講レビュー

292

回答

4.9

講座評価

講座

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

カリキュラム

全体

27件 ∙ (3時間 55分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．Get Started

3件 ∙ (18分)

セクション 2．ベーシックトゥイーン

9件 ∙ (1時間 5分)

4. GSAP オブジェクト
13:25
5. 基礎トゥイーニング
12:00
6. from() と fromTo() の違い
03:39
7. 遅延と反復
04:53
8. 加速度
06:04
9. 多要素制御
07:02
10. ツインコントロール
06:14
11. from() トゥイーンの問題点
07:43
12. GSAP公式ドキュメントの活用
04:40

セクション 3．タイムライン

5件 ∙ (48分)

13. タイムラインが重要な理由
07:39
14. 基礎タイムライン
07:50
15. Position Parameterの視覚的効果
11:20
16. 基礎タイムラインポジション
09:11
17. タイムラインのコントロールとラベリング
12:32

セクション 4．ボタンアニメーション効果

3件 ∙ (27分)

セクション 5．Final Project

5件 ∙ (29分)

セクション 6．GSAP キーフレーム

2件 ∙ (45分)

講座掲載日:

最終更新日:

受講レビュー

全体

61件

5.0

61件の受講レビュー

밀크티
受講レビュー 26
∙
平均評価 4.8
5
100% 受講後に作成
강의 올라온 지 반나절만에 완강했습니다! 저는 기존에 GSAP에 대해서 조금 공부를 했던 사람이라 기본 문법은 조금 알고 있고 간단한 프로젝트도 해봤었어요. 그래서 완강이 빨랐던 것 같습니다. 범쌤 이전에는 GSAP에 대한 온라인 강의를 모국어로 제공하는 강사가 없었기 때문에 유데미로 알음알음 대충 이해하며 들었던지라, 이번에 이해하지 못했던 개념을 많이 이해한 것 같습니다. 솔직한 저의 피드백을 남기자면 파트1 강의는 정말 기초 강의입니다! 문법과 개념 위주이기 때문에 관련한 심화 토이프로젝트는 많지 않습니다. 하지만 파트1에서 배운 문법을 토대로 무궁무진한 예제들을 만들 수 있습니다. (Pure CSS로 다양한 예제를 만들 수 있는 것처럼 GSAP를 이용하여 만들수 있을거에요.) 제가 왜 이런 이야기를 하느냐면, 혹시나 예제가 적어서 조금 아쉽다거나, 문법만 알려주니 너무 쉽다고 느껴지실 분들은 참고하시라고 말씀드리고 싶어서입니다. 저는 이미 기본 문법을 알고 있기때문에 저는 토이프로젝트의 양이 좀 더 많은 심화 강의를 기다리고 있습니다. 그럼에도 저는 이 강의를 산 이유는 제게는 이 강의가 GSAP 모국어 사전같은 느낌으로 소장하면서 문법이나 메소드 사용법을 까먹을 때마다 꺼내보려고 샀습니다. 현기증 나니까 파트4까지 하루라도 빨리 전부 올려주세요 ㅠ
motep
受講レビュー 2
∙
平均評価 5.0
5
19% 受講後に作成
와 정말 제가 찾던 강의가 여기에 있네요... 시중에 바닐라 자바스크립트로 이루어진 강의만 있고 gsap 강의는 gsap 내에서 공개하는 튜토리얼 말고는 아무리 찾아도 없었는데 정말 빛과 같은 강의입니다ㅜ 실무에서 아웃풋을 낼 수 있는 애니메이션 라이브러리를 찾고 있었는데 너무 좋네요ㅜ 강의 내주셔서 너무 감사드리고 감사드린김에 다음 강의도 꼭 출시 부탁드립니다. 강사님 복받으실거에요ㅎㅎ
Hyungjin
受講レビュー 20
∙
平均評価 5.0
5
100% 受講後に作成
역시 믿고 듣는 범쌤의 강의👍 인터랙티브 웹에 관심 있는 분들이라면 필수인 최고의 명강의입니다!! 다음 강의도 기대하고 있습니다!! 범쌤 화이팅!!🐯
플린
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
종종 인터렉션 프로젝트가 있어서 구글에 검색하고 관련 블로그에 있는 코드보고 가져와서 사용해봤는데 제가 기초적인 내용을 많이 놓치고 있었네요😂 노션문서로 정리되어 있어서 확실히 시각적으로 이해하기 좋습니다👍 피드백은 강의컬리티는 너무 좋습니다 설명도 자세히 알려주시고 문제가 생길점도 미리 캐치해주십니다. 살짝 아쉬운점은 예제를 몇개 더 추가해주시면 좋을 것 같습니다 다양한 예제로 이런식으로 응용이 가능하구나 확인하고 싶거든요ㅎㅎ 강의를 만드실때 좋은강의를 만드시느라 시간이 많이 걸리겠지만 예제소스는 강의가 아니더라도 코드팬으로 링크를 주셔서 강의내용 복습겸 강사님의 여러 소스를 보고 싶습니다 물론 코드팬에 직접 키워드로 검색해도 나오긴하는데 강의만 활용해서 만든 소스를 찾기 어렵네요 정말 도움되는 강의였습니다!
sun
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
업무하다가 다른 사이트 코드에서 gsap을 발견하고, 공부하고 싶어서 수강하게 됐어요! 영어 사이트 보면서 막막했는데 이렇게 기초부터 알려주는 강의가 있었다니! 애니메이션의 미래는 gsap인가 싶을 정도로 대단하고 다양하고 재밌는 기능들이 많네요! 다음 파트도 넘넘 기대됩니다~

￥5,187

kindtigerの他の講座

知識共有者の他の講座を見てみましょう！

디자인 시스템 with 피그마

범쌤

이 강의를 통해 디자인 시스템을 구축하고 내 디자인 작업물이 가지는 폭발적인 시너지를 느껴보세요.

초급

Figma, Figma Tokens, 디자인 시스템

디자인 시스템 with 피그마

범쌤

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

범쌤

웹 애니메이션의 꽃, 스크롤 애니메이션! GSAP을 보다 강력하게 사용할 수 있는 ScrollTrigger에 대해 학습합니다.

초급

scrolltrigger, gsap, 인터랙티브 웹

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

범쌤

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

似ている講座

同じ分野の他の講座を見てみましょう！

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

범쌤

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

초급

gsap, 인터랙티브 웹, JavaScript

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

범쌤

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

깡코딩

단순히 특정 사이트를 따라 만드는 강의가 아니라 지식공유자가 공유하는 스크롤 인터렉션 노하우, 핵심요소를 기초부터 탄탄히 배워 애플 등 국내 기업에서 많이 사용하는 UI 스크롤 인터렉션의 다양한 기법들과 모션 등을 배우고 만들어 봅니다.

초급

JavaScript, HTML/CSS, 인터랙티브 웹

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

깡코딩

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

초급

HTML/CSS, JavaScript, 인터랙티브 웹

인터랙티브 웹 개발 제대로 시작하기

1분코딩

자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.2

유용한IT학습

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 자바스크립트에 어느 정도 익숙해진 분들을 위한 강의입니다. Part 2은 자바스크립트의 추상화, 캡슐화, 상속, 다형성을 다루고 있습니다.

중급이상

JavaScript, jQuery

자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.2

유용한IT학습

디자이너의 스킬업을 위한 Lottie 완벽 이해하기

디자인베이스

더 이상 Gif, Video에 의존하지 않아도 됩니다. 에프터이펙트에서 제작한 애니메이션을 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요. 여러분도 매력적인 웹사이트를 만들 수 있습니다.

초급

Lottie, 웹 디자인, JavaScript

디자이너의 스킬업을 위한 Lottie 완벽 이해하기

디자인베이스

자바스크립트 입문자를 위한 강의

JeongTaeHyun

자바스크립트 입문을 하시고 싶으신가요? 그럼 저의 강의를 선택해 주세요.

초급

JavaScript

자바스크립트 입문자를 위한 강의

JeongTaeHyun

[인프런 X 생활코딩] HTML과 인터넷

인프런

생활코딩의 첫 번째 웹 개발 강의, <WEB 1 - HTML & Internet> 리뉴얼 버전이 오직 인프런에서만 공개됩니다!

입문

HTML/CSS, JavaScript, netlify

[인프런 X 생활코딩] HTML과 인터넷

인프런

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

HTML/CSS, JavaScript, 클론코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

두노피

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

HTML/CSS, JavaScript, REST API

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

자바스크립트 비기너: 튼튼한 기본 만들기

김영보

4개 강좌로 구성된 자바스크립트 바이블 강좌의 1번째 강좌입니다. 기본에 충실하였습니다. 자바스크립트의 근본을 이해하는데 중점을 두었습니다. 자바스크립트 스펙의 95% 이상을 다룹니다.

초급

JavaScript, 객체지향

자바스크립트 비기너: 튼튼한 기본 만들기

김영보

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2

유용한IT학습

웹디자인기능사 실기를 준비하기 위한 기초 내용을 공개 문제를 통해 학습하는 강의입니다. 실무에서 웹 코딩을 활용하고자 하는 웹디자이너에게도 유익한 강의에요.

초급

HTML/CSS, JavaScript

시험 전에 꼭 봐야 할 웹디자인기능사 공개 문제 (2020) Part.2

유용한IT학습

[환상의족발] 디자인부터 코딩까지

두노피

맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

초급

Photoshop, HTML/CSS, 클론코딩

[환상의족발] 디자인부터 코딩까지

두노피

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

지금까지 200여명의 오프라인 학원 학생들 신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해 코딩웍스가 심혈을 기울여 만들었습니다. 면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작 강의는 퍼블리셔 취업을 위해 필수로 준비해야 하는 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드입니다. 강의는 총 19시간 이상의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

초급

포트폴리오, HTML/CSS, jQuery

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

취업을 위해 면접을 자주 봐야 합니다. 면접을 자주 보기 위해서는 괜찮은 퍼블리셔 개인 포트폴리오 홈페이지가 반드시 있어야 합니다. 코딩웍스가 심혈을 기울여 만든 괜찮은 개인 포트폴리오 홈페이지 제작 가이드 교재(PDF)입니다. 해당 교재는 인터넷에서 구글링 해서 구할 수 있는 내용이 아닙니다. 코딩웍스가 수년간 현장에서 300여 명의 학생에게 퍼블리싱 이론, 실전, 개인 포트폴리오 홈페이지 제작 강의하고 학생들이 빨리 원하는 회사에 취업할 수 있도록 개인 포트폴리오 홈페이지 제작 방법을 상세하게 담은 세상에 하나뿐인 퍼블리셔 취업 개인 포트폴리오 홈페이지 제작 가이드(PDF) 입니다.

초급

포트폴리오, 웹 디자인, HTML/CSS

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

Figma, HTML/CSS

Figma 디자인부터 퍼블리싱까지

Michael Kwon

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인기능사 출제기준(2025.1.1~2025.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

HTML/CSS, jQuery, 웹 디자인

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

WebアニメーションのためのGSAPガイドPart.01

学習した受講者のレビュー

こんなことが学べます

ウェブ上で素晴らしいアニメーションを？ JavaScript GSAPを正しく起動する

JavaScriptのアニメーションライブラリ、GSAP

最も簡単で楽しく学ぶGSAPガイドA to Z

カリキュラム確認してみてください。

What is GSAP?

GSAPコアを理解する

Tweenを理解する

タイムラインを理解する

最終結果

Q&A 💬

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

kindtigerの他の講座

似ている講座

ウェブ上で素晴らしいアニメーションを？
JavaScript GSAPを正しく起動する

最も簡単で楽しく学ぶ
GSAPガイドA to Z

カリキュラム
確認してみてください。

こんな方に
おすすめです

こんにちは
です。