1. 기본 메서드
gsao.to()
움직임이 끝나는 점을 지정하는 애니메이션
gsap.to("타겟", {속성: 속성값, ....});gsap.from()
움직임의 시작 지점을 지정해주는 애니메이션
gsap.from("타겟",{duration:.7,yPercent:50})gsap.fromTo()
움직임의 시작점과 끝점을 지정해주는 애니메이션
gsap.fromTo("타겟", {시작 속성: 시작 속성값},{끝나는 속성: 끝나는 속성값});gsap.getById()
애니메이션이 id값을 설정하거나 id값을 불러 올 때 사용
//id를 설정하는 경우
gsap.to("target", {id: "myTween", duration: 1, x: 100});
//id를 불러오는 경우
gsap.getById("myTween")gsap.timeline()
연속적인 애니메이션
//타임라인을 이용한 애니메이션 연속 작업
const tl = gsap.timeline();
tl.to("#id", {x: 50, duration: 1});
tl.to("#id", {x: 150, duration: 1});
tl.to("#id", {x: 100, duration: 1});gsap.getProperty()
요소의 속성 값을 가져온다.
단위를 적지 않으면 숫자만 반환되고, 단위를 적으면 단위까지 같이 반환된다.
값이 없을 경우 null을 반환
gsap.getProperty("#id", "x"); // #id의 x 속성 값을 반환합니다. 20
gsap.getProperty("#id", "x", "px") // 단위를 적으면 단위 값을 반환합니다. "20px"
gsap.getProperty("#id", "backgroundColor") // 백그라운드 컬러 속성 값을 반환합니다. 