하나씩 명령어 풀어서 설명하겠습니다.
gsap.to('.box', {
x: 200,
duration: 1.5,
});
gsap
애니메이션 시작
.to
~향하다, ~보내다
('.box')
애니메이션 대상 작성
{ }
애니메이션 동작하는 코드
x
가로값
y
세로값
duration
시간
gsap.from('.box', {
x: 200,
duration: 1.5,
});
.from
.to의 반대개념
var tl1 = gsap.timeline();
tl1.to('.box-1', {
x: 500,
duration: 5,
})
.to('.box-1', {
backgroundColor: 'pink',
duration: 5,
}, '+=2');
timeline
순차적으로 애니메이션 동작이 가능합니다.
+=2
2초 이따가 늦게 애니메이션 동작
-=2
2초 동시에 애니메이션 동작