GSAP 간단한 실습 03

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

gsap

목록 보기
4/8

주의할 점!

그냥 드래그해서 효과만 보고 끝이라고 생각하면 안됩니다.
입문이지만 다양하게 응용해보고 검색해서 다양한 효과 알아보면서 해봅시다.

gsap.to('.demo > .box', {
  y: 100,
  duration: 1,
  stagger: 0.3,
});

stagger 요소의 간격 (각 '.box' 요소가 애니메이션을 시작할 때 사이의 0.3초)


gsap.to('.demo > .box', {
  y: 100,
  duration: 1,
  stagger: {
    // each: 0.5,
    amount: 1,
    from: 'end',
  },
});

stagger { } 안에 옵션 추가할 수 있습니다.
each 요소의 간격 (stagger: 0.3 똑같습니다.)
from: 'end' 요소의 끝
from: 'center' 요소의 가운데
from: 'edges' 요소의 좌우
amount 요소의 총 1초동안 작동


gsap.timeline()
  // 첫 번째 코드 실행
  .to('.box', {
  duration: 1, 
  rotation: 360, 
  y: 100,
  stagger: {
    amount: 1,
    from: 'center',
  } 
})
  .to('.box', {
  // 두 번째 코드 실행
  duration: 1, 
  rotation: 0, 
  y: 0,
  stagger: {
    amount: 1,
    from: 'center',
  } 
})

timeline 순서대로 애니메이션 주니까 첫 번째 코드 실행하고 두 번째 코드가 실행됩니다.

profile
코드를 기록하는 공간

0개의 댓글