GSAP 간단한 실습 01

웹클래스·2021년 5월 13일
0

gsap

목록 보기
2/8

실습하면서 배우기

하나씩 명령어 풀어서 설명하겠습니다.

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초 동시에 애니메이션 동작

profile
코드를 기록하는 공간

0개의 댓글