[GSAP] 2. 기본 메서드

 

 

2. 기본메서드

 

    2-1.  to()

 

gsap.to()는 가장 일반적인 유형으로 대상 값을 어딘가로 가게 하는 값이다.

 

gsap.to(".item", {x: 100, y:100, duration:1});

.item을 1초동안 x로 100, y로 100 이동시킨다.

gsap.to()는 현재값을 자동으로 파악하여, 시작 값이 필요하지 않는다.

 

 

 

 

    2-2.  from()

 

gsap.from()은 to와 반대라고 생각하면 쉽다.

gsap.from(".item", {opacity:0, y:100, duration:1});

DOM요소의 현재 위치가 목표값이고, y는 100에서 0까지 나아간다.

 

 

 

 

    2-3.  fromTo()

 

gsap.fromTo()는 시작과 끝 값을 지정한다.

DOM의 현재값이 무엇이었떤 간에, 애니메이션을 실행하면 같은 결과를 나타낸다.

 

gsap.fromTo(".box", {autoAlpha: 0}, {autoAlpha: 0.5, duration:1});