gsap.to 속성값//stagger, transform되는 속성들

const leftWidth = document.querySelector('width값선택자').offsetWidth - 100 + "px";
startBtn.addEventListener('click', moveStart);

function moveStart(){
gsap.to('.box1', 1, {left: leftWidth ,stagger:1, fill:"yellow",rotation:360,duration:2});
}

/* transform 속성들은 적용되는지 실험해볼 필요가 있다.
x: 100 // transform: translateX(100px)
y: 100 // transform: translateY(100px)
z: 100 // transform: translateZ(100px)
// you do not need the null transform hack or hardware acceleration, it comes baked in with
// force3d:true. If you want to unset this, force3d:false
scale: 2 // transform: scale(2)
scaleX: 2 // transform: scaleX(2)
scaleY: 2 // transform: scaleY(2)
scaleZ: 2 // transform: scaleZ(2)
skew: 15 // transform: skew(15deg)
skewX: 15 // transform: skewX(15deg)
skewY: 15 // transform: skewY(15deg)
rotation: 180 // transform: rotate(180deg)
rotationX: 180 // transform: rotateX(180deg)
rotationY: 180 // transform: rotateY(180deg)
rotationZ: 180 // transform: rotateZ(180deg)
perspective: 1000 // transform: perspective(1000px)
transformOrigin: '50% 50%' // transform-origin: 50% 50%
*/

gsap.to('.box1', 1, {left: leftWidth ,stagger:1, fill:"yellow",rotation:360,duration:2});

box1을 1(완료시점)까지 leftWidth만큼 translateX위치로, 각각(stagger는 여러개의 target을 분할시간으로동작),

yellow색상(완료시점), 360회전,2초동안 

 

//stagger 세부속성 - 여러개의 target을 움직일때 세부조정하기 좋다 

: each, amout,from 

gsap.to('.box1', 1, {left: leftWidth ,stagger:{
	each:1 // target인 box1들이 각각 1초동안 animate
    //amount:1 //target인 box1들이 1초를 box1의 수만큼 나누어 animate
    //from:"end" //뒤부터 animate(중심은 center부터)
}
});

 

**참고

https://www.youtube.com/watch?v=79jvA8EypIU&list=PLSkIx8U0TMvgH2PEokYLIxofdb1L9cJjz&index=11