gsap.timeline({scrollTrigger}), toggleClass
***scrollTrigger scrollTrigger 플러그인으로 gsap timeline 내의 스크롤값에 따른 timeline 설정 gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger:{ trigger:".box", markers:true, start:'top 80%', end:'top 30%', scrub:1 //start-end } }); tl.to(".box",{x:500,duration:5}) .to(".box",{y:500,duration:1}) .to(".box",{x:0,duration:2}) https://codepen.io/fangmin/pen/yLMXJXa gsap timeline scrollTri..
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..