gsap.fromto

• GSAP3 (2019)
• TweenLite, TweenMax, TimelineLite, TimelineMax의 API가 gsap로 통합,기존의 코드와도 호환성이 유지.

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

function moveStart(){
gsap.to('.box1', 1, {left: leftWidth });
//gsap.fromTo(".box2", 1, {left:  0 }, {left: leftWidth });
//gsap.to(['.box1, .box2, .box3'], 1, { left : leftWidth });
//gsap.to('.box1', 1, {left: leftWidth, repeat: 1, yoyo: true});
}

gsap.to('.box1', 1, {left: leftWidth });

// box1을, 1(완료지점까지),  translateX leftWidth 만큼 이동

 

gsap.fromTo(".box2", 1, {left:  0 }, {left: leftWidth });

//box2를, 1(완료지점까지), translateX 0부터, translateX leftWidth 만큼 이동

 

gsap.to(['.box1, .box2, .box3'], 1, { left : leftWidth });

//box123를, 1(완료지점까지), translateX leftWidth만큼 이동

 

gsap.to('.box1', 1, {left: leftWidth, repeat: 1, yoyo: true});

//box1을 1(완료지점까지), translateX leftWidth만큼, 반복횟수1, alternative효과

 

gsap.to('.box1', 1, {left: leftWidth, repeat: 1, yoyo: true, ease:bounce.out});

//box1을 1(완료지점까지), translateX leftWidth만큼, 반복횟수1, alternative 효과, ease효과

 

gsap.to('.box1', 1, {left: leftWidth, repeat: 1,repeat-delay:0.5; yoyo: true, ease:bounce.out});

//box1을 1(완료지점까지), translateX leftWidth만큼, 반복횟수1, 0.5초 delay, alternative 효과, ease효과

 

 

*ease효과

Ease Visualizer - Blog - GreenSock

 

*비교

CSS animation, jquery .animate()