강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

GSAP Guide for Web Animation Part.01

GSAP will take you one step closer to interactive web development and change the way you look at animation.

(5.0) 61 reviews

645 learners

  • kindtiger
프론트엔드
front-end
gsap
애니메이션
Interactive Web
JavaScript
HTML/CSS

Reviews from Early Learners

What you will learn!

  • How to use GSAP

  • Understanding Animation

  • Understanding the Web

  • HTML structure

  • GSAP Plugin

GSAP grabs the core!
The interactive web, much easier and more convenient 🌠

Cool animations on the web?
Getting Started with JavaScript GSAP

Here's a Bridge clone coding page created using GSAP. (Link)

Are you interested in the interactive web? Do you want to create stunning web animations using JavaScript? Do you enjoy both design and development? GSAP is the groundbreaking platform for you.

GSAP, a JavaScript animation library

GSAP, created by GreenSock, is an animation platform that allows front-end developers, UI designers, and others to easily and conveniently create animations using JavaScript.

✅ If you are interested in interactive web, OK!
Anyone who knows HTML, CSS & JavaScript!

However... despite the overwhelming appeal of GSAP, it is not easy to actually decide to use it.
This is because it is difficult to find proper Korean documents or learning materials.

But at the same time, GSAP provides various functions for the convenience of users.
Therefore, if you learn the core functions properly, anyone can easily use it.

I hope this course will help many people fall in love with GSAP and interactive web development!


The easiest and most fun way to learn
GSAP Guide A to Z

Windows 10 + Visual Studio Code 2019

Build a strong foundation

To make it easier to understand the core features
I will explain each part one by one.
(Tween, Timeline, Keyframe...)

Practice with confidence

After the lecture, you can practice
Provides environment and challenges.
(Notion environment documentation and Timeline materials)

Even beginners can do it without worry

Even if you only know the basics of HTML/CSS + JS
You can learn enough.
(It would be even better if you knew CSS and JS in depth!)

💡 After learning GSAP, your perspective on animation will change!

Now, you'll see the principles of web animation, something you'd previously only seen and appreciated with a simple "Wow, that's pretty. " After taking this course, you'll be able to accurately predict which method and which property were used, and even implement them yourself, even when viewing the same animation.


The curriculum
Check it out.

What is GSAP?

GSAP is an animation platform built by GreenSock that allows you to animate any element controllable with JavaScript (CSS properties, SVG, React, Canvas, Normal Object, etc.). It also supports cross-browser compatibility across numerous browsers and is up to 20x faster than jQuery.

Understanding GSAP Core

Learn about the properties and methods of the GSAP object by directly checking the official GreenSock documentation.

Understanding Tween

Learn the principles of basic animation and create simple animations using Tween.

Understanding the Timeline

Learn how to control and manipulate the flow of time in your animations using the timeline.

Final result

Create your own animated web page intro.

💾 Course Environment and Learning Materials Guide

  • The course uses CodePen , an online code editor, and can be used on both Windows and macOS.
  • Learning materials are provided as Notion documents (Section 0 - Environment Configuration Lesson Notes).
  • You should know basic HTML, CSS, and JavaScript .

Q&A 💬

Q. Why should I learn GSAP?

For web developers, where productivity is paramount, implementing animations with pure JavaScript is both irrational and unnecessary. Wouldn't it be more convenient to use a well-made tool? It's like using a hammer instead of your hands to drive nails.

Q. What are the benefits of learning GSAP?

You will gain the ability to analyze animations and easily incorporate them into your projects.

Q. What can I do if I learn GSAP?

You won't be able to create interactive web content right away after taking this class. However, since it's a course that builds a solid foundation, it'll be helpful if you take it with the mindset of solidifying your fundamentals :)

Q. Is there anything I need to prepare before attending the lecture?

It's recommended that you have prior knowledge of HTML, CSS, and JavaScript. While you can follow along without much knowledge, understanding the material will significantly broaden your understanding.

Q. What level of content is covered in the class?

Part 1 is a basic GSAP course. This course focuses on basic GSAP grammar and functions.

Recommended for
these people

Who is this course right for?

  • Developers who want to add animations to the web

  • Developers who want to use GSAP properly

  • Designers curious about web animation

Need to know before starting?

  • HTML

  • CSS

  • JavaScript

Hello
This is

4,426

Learners

226

Reviews

293

Answers

4.9

Rating

5

Courses

 

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

 

Curriculum

All

27 lectures ∙ (3hr 55min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

61 reviews

5.0

61 reviews

  • milktea님의 프로필 이미지
    milktea

    Reviews 26

    Average Rating 4.8

    5

    100% enrolled

    川の上がってから半日で頑張りました! 私は既存のGSAPについて少し勉強していた人なので、基本文法は少し知っています。 簡単なプロジェクトもやってみました。 バンサム以前は、GSAPのオンライン講義を母国語で提供する講師がいなかったため ユデミーで知って知って大体理解して聞いたので、今回理解できなかった概念をたくさん理解したようです。 率直な私のフィードバックを残す パート1講義は本当に基礎講義です! 関連する深化トイプロジェクトはあまりありません。 しかし、パート1で学んだ文法に基づいて無関心な例を作ることができます。 (Pure CSSでさまざまな例を作成できるように、GSAPを使用して作成できます。) 私がなぜこのような話をするのか、もしかしたら例が少なくて少し残念だったり、 文法だけを教えてくれるので、とても簡単だと感じられる方は参考にしてもらいたいです。 私はすでに基本的な文法を知っているので 私はトイプロジェクトの量が少し深刻な講義を待っています。 それでも私はこの講義を買った理由は私にはこの講義がGSAP母語辞書のような感じで 所蔵しながら文法やメソッドの使い方を忘れるたびに取り出そうと買いました。 めまいだからパート4まで一日でも早く全部上げてくださいㅠ

    • motep1326님의 프로필 이미지
      motep1326

      Reviews 2

      Average Rating 5.0

      5

      19% enrolled

      そして本当に私が探していた講義がここにあります... 市中にバニラのJavaScriptで行われた講義だけあり、gsap講義はgsap内で公開するチュートリアルではなく、どんなに探していなかったのに本当に光のような講義ですㅜ 実務でアウトプットを出すことができるアニメーションライブラリを探していましたが、とても良いですねㅜ 講義していただきありがとうございます。ありがとうございました。 講師は祝福されます。

      • hjux님의 프로필 이미지
        hjux

        Reviews 20

        Average Rating 5.0

        5

        100% enrolled

        やはり信じて聞くバンサムの講義👍 インタラクティブウェブに興味のある方なら必須の最高の名講義です! 次の講義も楽しみにしています! ブムサムファイティング!!🐯

        • euflynn님의 프로필 이미지
          euflynn

          Reviews 4

          Average Rating 5.0

          5

          100% enrolled

          しばしばインタラクションプロジェクトがあってGoogleに検索して関連ブログにあるコードレポートをインポートして使ってみましたが、私が基本的な内容をたくさん見逃していましたね😂 ノッション文書でまとめられているので、確実に視覚的に理解することをお勧めします👍 フィードバックはレッスンカリティはあまりにも良い説明も詳しく教えてくれ、問題が生じる点もあらかじめキャッチしてくれます。 ちょっと残念なことは、例をいくつか追加していただければいいと思います。 講義を作るときに良い講義を作るのに時間がかかりますが、例のソースは講義でなくてもコードファンでリンクをいただき、講義内容の復習兼講師様の様々なソースを見たいと思います。活用して作ったソースを見つけるのは難しいですね 本当に役立つ講義でした!

          • sun5322님의 프로필 이미지
            sun5322

            Reviews 5

            Average Rating 4.4

            5

            100% enrolled

            仕事中に別のサイトコードでgsapを見つけて、勉強したくて受講することになりました! 英語サイトを見ながら幕を閉じたが、こうして基礎から教えてくれる講義があったなんて!アニメの未来はgsapかと思うほど大変で多様で面白い機能が多いですね! 次のパートも楽しみにしています〜

            $34.10

            kindtiger's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!