웹 애니메이션을 위한 GSAP 가이드 Part.01
난이도 ★☆☆☆☆ 뭐든지 기본기가 가장 중요하죠 GSAP의 기초문법들을 학습하며 웹 애니메이션의 특징들을 이해할 수 있는 파트입니다.
₩44,000
30% 할인
전체 구매 적용쿠폰 받기
로드맵 코스
What is GSAP?
자바스크립트 애니메이션 라이브러리, GSAP
👉 GSAP(GreenSock Animation Platform)은 애니메이션 작업 과정을 더 쉽고 빠르게 만들어줍니다!
웹 애니메이션을 더 쉽고 빠르게
지구에서 가장 강력한 애니메이션 라이브러리
- 매우 작은 용량의 파일로 다이나믹한 애니메이션을 만들 수 있습니다.
- 다양한 브라우저에서 발생할 수 있는 크로스 브라우징 문제를 한번에 해결할 수 있습니다.
- CSS 애니메이션과 달리 시퀀싱 기술을 사용해 보다 역동적인 애니메이션을 쉽게 그려갈 수 있습니다.
- 단일 애니메이션부터 타임라인을 관리하는 애니메이션으로 순서를 자유롭게 배치할 수 있습니다.
- 10년 이상 동안 수많은 전문 애니메이터들이 사용하고 있습니다.
- 자세한 공식 문서, 넓은 사용자 포럼과 생태계를 가지고 있습니다.
GSAP으로 만드는 역동적인 웹 애니메이션
이런 분들께 추천합니다.
- ✅ 웹 애니메이션을 구현해보고 싶었던 프론트엔드 개발자
- ✅ 사이트가 밋밋하다고 느끼는 개발자
- ✅ 웹 애니메이션이 궁금한 디자이너
- ✅ GSAP의 자세한 사용법이 궁금한 개발자
- ✅ 애니메이션의 순서와 흐름을 이해하고 싶은 기획자
- ✅ 자바스크립트로 애니메이션을 만들고 싶은 누구나
GSAP을 사용하면 웹페이지를 보는 시각이 달라지며, 애니메이션의 움직임을 보고 직접 구현해볼 수 있는 사고를 가질 수 있습니다!
이 로드맵 하나로 GSAP 도전 OK!
Part 1 - GSAP 기초 사용법
👉 GSAP 공식 문서를 기반으로 기초 트윈과 타임라인의 사용방법에 대해 학습합니다.
Part 2 - 타임라인 기반 심화 애니메이션
👉 기초 트윈과 타임라인을 기반으로 보다 다양하고 심화된 애니메이션 구성과 실습을 진행합니다.
- 단계별로 학습해 애니메이션을 고도화할 수 있는 체계적인 커리큘럼을 바탕으로 만들었습니다.
- 섹션별 실습 파일을 제공해 따라해볼 수 있도록 준비했습니다.
- 강의를 보면서 한 단계씩 직접 코드를 입력해볼 수 있는 강의 자료를 제공합니다.
- GSAP 애니메이션에 필요한 자바스크립트(JavaScript)의 문법 설명을 하나씩 짚고 넘어갑니다.
생생한 수강평을 확인해보세요! 👀
이 로드맵을 엮은 지식공유자는?
안녕하세요, 범쌤입니다 🐯
디자인과 애니메이션에 관심이 많고 인터랙티브 웹 개발과 교육에 5년 이상의 경력을 가지고 있습니다. 현재는 웹 디자이너와 웹 프론트엔드 개발자를 육성하는 교육을 진행하고 있습니다 😃
이 로드맵을 통해 더 많은 분들이 GSAP의 매력을 만나게 되길 바랍니다!
로드맵 코스
웹 애니메이션을 위한 GSAP 가이드 Part.02
난이도 ★★☆☆☆ GSAP은 자바스크립트의 라이브러리 이기 때문에 결국 JavaScript를 잘 다뤄야 여러가지 응용이 가능하다는점 알고 계신가요? 이번 파트에서는 JavaScript를 사용해여 보다 GSAP을 다양하게 핸들링 할 수 있는 환경에 대해 학습합니다.
₩156,200
웹 애니메이션을 위한 GSAP 가이드 Part.03
난이도 ★★★☆☆ 앞서 학습한 GSAP의 다양한 기능들과 스크롤 애니메이션에 특화된 플러그인 ScrollTrigger를 사용하여 보다 다체로운 스크롤 애니메이션 웹사이트를 구성합니다.
₩156,200
30% 할인
전체 구매 적용쿠폰 받기