강의

멘토링

로드맵

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

644 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,416

Learners

223

Reviews

292

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

    I finished the course in half a day since the lecture was uploaded! I had studied GSAP a little bit before, so I know a little bit about the basic grammar and I had done some simple projects. That's why I think I finished the course quickly. Before Beom, there was no instructor who provided online lectures on GSAP in my native language, so I listened to Udemy and understood it step by step, so I think I understood a lot of the concepts I didn't understand this time. Let me give you my honest feedback. Part 1 is a really basic lecture! Since it focuses on grammar and concepts, there aren't many related in-depth toy projects. However, you can create endless examples based on the grammar you learned in Part 1. (Just like you can create various examples with Pure CSS, you can create them using GSAP.) The reason I'm saying this is because I want to tell you that if you feel a little disappointed because there are few examples, or if you feel that it's too easy because it only teaches grammar, please refer to it. Since I already know the basic grammar, I am waiting for a more in-depth lecture with a larger amount of toy projects. Even so, the reason I bought this lecture is because it feels like a GSAP native language dictionary to me, I bought it to keep it and take it out whenever I forget the grammar or method usage. I feel dizzy, so please upload all of Part 4 as soon as possible. ㅠ

    • motep1326님의 프로필 이미지
      motep1326

      Reviews 2

      Average Rating 5.0

      5

      19% enrolled

      Wow, the lecture I was looking for is here... There are only lectures on vanilla JavaScript on the market, and no GSAP lectures except for the tutorials released within GSAP, but this lecture is really like lightㅜ I was looking for an animation library that can produce output in practice, and it's so goodㅜ Thank you so much for giving me the lecture, and since I'm grateful, please release the next lecture. I hope you'll be blessed, instructorㅎㅎ

      • hjux님의 프로필 이미지
        hjux

        Reviews 20

        Average Rating 5.0

        5

        100% enrolled

        As expected, Beom's lectures are trustworthy and listenable👍 This is the best lecture that is a must-have for those interested in interactive web!! I'm looking forward to the next lecture!! Beom, fighting!!🐯

        • euflynn님의 프로필 이미지
          euflynn

          Reviews 4

          Average Rating 5.0

          5

          100% enrolled

          I often have interaction projects, so I searched on Google and used the codes from related blogs, but I missed a lot of the basics. 😂 It's organized as a Notion document, so it's definitely easy to understand visually👍 The feedback is really good. The lecture quality is great. The explanations are detailed and problems are caught in advance. A little disappointing thing is that it would be good if you could add a few more examples. I want to see how it can be applied in this way with various examples. ㅎㅎ When you make a lecture, it takes a lot of time to make a good lecture, but even if it's not a lecture, I want to review the lecture content and see the instructor's various sources by giving a link to Codepan. Of course, you can search for it by keyword on Codepan, but it's hard to find sources created only using lectures. It was a really helpful lecture!

          • sun5322님의 프로필 이미지
            sun5322

            Reviews 4

            Average Rating 5.0

            5

            100% enrolled

            While working, I found gsap in another site's code, and I wanted to study it, so I took the course! I was at a loss when looking at English sites, but there was a course that taught me from the basics like this! It's so great and has so many fun and diverse functions that I think the future of animation is gsap! I'm really looking forward to the next part~

            Limited time deal ends in 1 days

            $26.40

            22%

            $34.10

            kindtiger's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!