JS/JS Library 4

[GSAP] GSAP 4 / GSAP ease

ease애니메이션에서 속도의 변화를 조절하는 속성단순히 시작과 끝을 선형으로 움직이는 것보다는, 더 자연스럽거나 역동적인 움직임을 만들기 위해 사용선형(linear): 일정한 속도로 움직임이징(ease): 속도를 변화시켜 가속, 감속, 탄력 등을 표현// [문법]gsap.to(target, { ease: "속성" }); 주요 ease 종류Linear / None속도가 일정하게 유지되는 기본 형태특징: 가속이나 감속 없음, 꾸준히 움직임gsap.to(".box", { x: 300, duration: 2, ease: "linear" });power 계열가장 많이 사용되는 기본 ease.숫자가 클수록 가속/감속이 더 강함.종류설명특징power1약간의 가속/감속부드럽게 시작하거나 끝날 때power2중간 정도흔히..

JS/JS Library 2025.08.19

[GSAP] GSAP 3 / GSAP 기본 애니메이션 문법

GSAP 기본 구문 애니메이션에 대한 정보를 포함하는 메서드, 타겟, 그리고 vars 객체를 가지고 있음대상GSAP에 무엇을 애니메이션으로 만들고 대상document.querySelectorAll(), HTML 또는 SVG 대상의 경우 다음과 같은 선택자 사용 가능".class" 그리고. "#id". 또는 변수나 배열을 전달할 수도 있음// use a class or IDgsap.to(".box", { x: 200 });// a complex CSS selectorgsap.to("section > .box", { x: 200 });// a variablelet box = document.querySelector(".box");gsap.to(box, { x: 200 })// or even an Array..

JS/JS Library 2025.08.19

[GSAP] GSAP 2 / GSAP setting

1. GSAP 라이브러리 불러오기GSAP은 CDN 또는 NPM, Yarn을 통해 사용할 수 있음1) CDN 방식 (HTML에 바로 연결)별도 빌드 환경 없이 바로 사용 가능. 일반적으로 마감 본문 태그와 사용자 지정 GSAP 코드 앞에 GSAP 스크립트 태그를 붙이는 것이 가장 좋음 GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋음 2) NPM 방식 (프로젝트 설치)React, Vue, Next.js 같은 프레임워크 프로젝트에서 많이 사용.npm install gsapimport gsap from "gsap";

JS/JS Library 2025.08.19

[GSAP] GSAP 1 / GSAP 기본 (gsap, tween, timeline, Sequencing

GSAP (GreenSock Animation Platform) 정의 : 웹에서 애니메이션을 부드럽고 효율적으로 구현할 수 있는 자바스크립트 기반 애니메이션 라이브러리CSS 애니메이션이나 requestAnimationFrame을 직접 다루는 것보다 성능이 뛰어남복잡한 애니메이션을 직관적으로 제어할 수 있음 GSAP의 특징성능 최적화초당 60fps 애니메이션 유지가 가능하도록 최적화되어 있음구형 브라우저와도 호환성이 좋아서 안정적으로 동작.다양한 애니메이션 제어위치, 크기, 회전, 색상, 투명도 등 거의 모든 CSS 속성을 제어할 수 있음숫자 값이 들어가는 속성은 전부 애니메이션화가 가능.정교한 타이밍 제어delay, repeat, yoyo 같은 옵션으로 반복 애니메이션도 쉽게 작성할 수 있음Timelin..

JS/JS Library 2025.08.19