gsap 3

[GSAP] Tween과 to(), from(), fromTo()

GSAP은 Tween 및 Timelines를 만들고 이를 제어하는 다양한 메서드와 속성을 가진 객체(object)입니다. 그렇다면 Tween과 Timelines는 무엇인가?! 오늘은 먼저 Tween에 대해서 알아보겠습니다!! 💫 Tween Tween은 애니메이션의 속성을 정의하고, 그 속성대로 애니메이션이 작동하게 하는 것을 말합니다. target, duration 등 작성된 속성을 토대로 Tween이 작동하면서 해당 시점의 속성 값이 무엇이어야 하는지를 파악하여 이에 따라 적용합니다. (영문을 해석하다 보니... 매끄럽게 이해하시기 어렵다면... 죄송합니다...허허) Tween을 생성하기 위한 기본 메소드는 .to(), .from(), .fromTo()가 있습니다.3가지의 메소드는 Tween 인스턴스를..

Javascript 2023.07.18

[GSAP] 애니메이션 라이브러리 GSAP 셋팅부터 시작해봅니다!

💫 GSAP 이란? GSAP은 이미 많은 사용자를 보여하고 있는 자바스크립트 애니메이션 라이브러리입니다. 보통 CSS 혹은 제이쿼리 등을 이용하여 애니메이션 효과를 구현하지만, 보다 복잡하고 화려한 애니메이션을 구현하기에 어려운 부분이 있기에 GSAP을 이용한다고 합니다!! GSAP도 간단한 애니메이션을 구현하는 것은 사용법이 매우 간단하지만, 복잡한 애니메이션을 구현하게 될 때는 사용법이 무척 어렵고 헷갈려집니다;; 허허 그리하여 저도 이참에 기본부터 시작해서 기깔나는 애니메이션을 구현할 수 있도록 GSAP 정복을 해보려고 하니 함께 하시죠!!!ㅎㅎㅎㅎ 우선 셋팅부터 해야겠지요? 설치(Installation) GSAP 공홈에서는 zip파일로 다운로드, NPM, CDN, GITHUB 등 다양한 이용방법을..

Javascript 2023.07.13

[GSAP] 스크롤 위치에 따라 탭메뉴 On & Off (ScrollTrigger)

애니메이션을 쉽게 구현할 수 있게 해주는 라이브러리인 gsap!! gsap의 scrollTrigger를 이용하여 각각의 영역에 스크롤이 위치하게 되면 해당 탭메뉴가 On, 벗어나게 되면 Off 되도록 구현해 보았습니다!! 나름 알록달록 꾸며보았습니다ㅎㅎㅎ Home About Work Contact panel-Home panel-About panel-Work panel-Contact .nav-list{position:fixed;top:0;left:0;width:150px;height:auto;background:#fff;} .nav-list .item{display:block;text-decoration:none;color:#000;padding:10px;text-align:center;border:1px..

Javascript 2023.03.08
반응형