그냥 드래그해서 효과만 보고 끝이라고 생각하면 안됩니다.
입문이지만 다양하게 응용해보고 검색해서 다양한 효과 알아보면서 해봅시다.
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
순서대로 애니메이션 주니까 첫 번째 코드 실행하고 두 번째 코드가 실행됩니다.