본문 바로가기

프론트엔드 공부/gsap

 (5)
gsap.utils.toArray , scrollTrigger 활용하여 각element에 스크롤값 부여 FUNCTIONS를 반환,GSAP의 기능 기반 기능을 활용하여 트윈에 직접 연결할 수 있습니다. 이 경우 모든 대상에 대해 동일한 종료 값을 사용하는 대신 각 대상에 대해 한 번씩 호출됩니다. const reveal = gsap.utils.toArray('.reveal'); reveal.forEach((text,i)=>{ ScrollTrigger.create({ trigger:text, toggleClass:'active', start:"top 90%", end:"top 20%", markers:true, scrub:true }); }); const images = gsap.utils.toArray('img'); images.forEach((img,i)=>{ ScrollTrigger.create({ tr..
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.timeline() timeline메서드를 활용하여 각 target에 timeline부여 let tl = gsap.timeline(); //total duration: tl .to(".one",{duration:2,x:500}) //2초 동안 x축으로 500px .to(".two",{duration:3,x:500},1) // 1초 후 3초동안 x축으로 500px(1은 absolute값) .to(".three",{duration:1,x:500},"
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) // ..
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..

티스토리툴바