
디자인 시스템 with 피그마
범쌤
이 강의를 통해 디자인 시스템을 구축하고 내 디자인 작업물이 가지는 폭발적인 시너지를 느껴보세요.
Basic
Figma, Figma Tokens, 디자인 시스템
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)
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,393
Learners
222
Reviews
292
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
종종 인터렉션 프로젝트가 있어서 구글에 검색하고 관련 블로그에 있는 코드보고 가져와서 사용해봤는데 제가 기초적인 내용을 많이 놓치고 있었네요😂 노션문서로 정리되어 있어서 확실히 시각적으로 이해하기 좋습니다👍 피드백은 강의컬리티는 너무 좋습니다 설명도 자세히 알려주시고 문제가 생길점도 미리 캐치해주십니다. 살짝 아쉬운점은 예제를 몇개 더 추가해주시면 좋을 것 같습니다 다양한 예제로 이런식으로 응용이 가능하구나 확인하고 싶거든요ㅎㅎ 강의를 만드실때 좋은강의를 만드시느라 시간이 많이 걸리겠지만 예제소스는 강의가 아니더라도 코드팬으로 링크를 주셔서 강의내용 복습겸 강사님의 여러 소스를 보고 싶습니다 물론 코드팬에 직접 키워드로 검색해도 나오긴하는데 강의만 활용해서 만든 소스를 찾기 어렵네요 정말 도움되는 강의였습니다!
Reviews 4
∙
Average Rating 5.0
$34.10
Check out other courses by the instructor!
Explore other courses in the same field!