
WebアニメーションのためのGSAPガイドPart.02
kindtiger
「GSAP こんなことまで可能だった?」 アニメが複雑で難しいという既存の固定観念を悟ります。
初級
gsap, Interactive Web, JavaScript
GSAP will take you one step closer to interactive web development and change the way you look at animation.

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 🌠
 Here's a Bridge clone coding page created using GSAP. (Link)
 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, 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!
 
    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.

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.

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

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

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

Create your own animated web page intro.
💾 Course Environment and Learning Materials Guide
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.
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
4,426
Learners
226
Reviews
293
Answers
4.9
Rating
5
Courses
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
All
27 lectures ∙ (3hr 55min)
Course Materials:
All
61 reviews
5.0
61 reviews

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

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

Reviews 5
∙
Average Rating 4.4
$34.10
Check out other courses by the instructor!
Explore other courses in the same field!