[JS-GSAP] stagger

[JS-GSAP] stagger

2023. 1. 13. 09:10ㆍJavascript

1. stagger

stagger는 첫 번째 인자로, 애니메이션을 실행할 list 를 받고,

그 list에 있는 element 들에 차례로 애니메이션을 실행 시켜준다.

<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { margin: 0;padding: 0;}
    .demo {display: flex;}
    .demo .cont {width: 50px; height: 50px; border:1px solid black;}
  </style>
</head>

<body>

  <div class="demo">
    <div class="cont cont1"></div>
    <div class="cont cont2"></div>
    <div class="cont cont3"></div>
    <div class="cont cont4"></div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="js/plugins.js"></script>
<script>
  let tl = gsap.timeline();
  
  tl.to('.cont1', {duration:1, y: 100})
  tl.to('.cont2', {duration:1, y: 100}, "-=0.5")  // 0.5초 간격으로 내려온다
  tl.to('.cont3', {duration:1, y: 100}, "-=0.5")
  tl.to('.cont4', {duration:1, y: 100}, "-=0.5")
  
  // 위 4줄을 한줄로 가능케하는 것이 stasgger
  gsap.to('.cont', {duration:1, y: 100, stagger: 0.5}) 
  
</script>
</body>
</html>

2. 속성

// 끝에서 0.5초 간격으로내려온다
gsap.to('.cont', {duration:1, y: 100, stagger: {each: 0.5, from: 'end'}})

// 끝에서 2초동안 4개의 cont가 순차적으로 내려온다.
gsap.to('.cont', {duration:1, y: 100, stagger: {amount: 2, from: 'end'}})

each : 1

target인 box1들이 각각 1초동안 animate

amount:1

target인 box1들이 1초를 box1의 수만큼 나누어 animate

from : 방향 **파도타기 방향으로 생각하기

start: 처음부터

end: 끝에서부터

center: 중간부터 퍼져나감

edges: 양끝에서부터 중간으로

3. 응용

<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { margin: 0; padding: 0;}
    .section1 {display: flex; justify-content: center; align-items: center; 
               background: #000; min-height: 200px; color: #fff;}
    .section1__text > span {display: inline-block; overflow: hidden; }
    .section1__text > span > span {font-size: 2rem; display: inline-block;}
  </style>
</head>

<body>
<div>
  <div class="section1">
    <div class="section1__text">
      <span><span>안</span></span>
      <span><span>녕</span></span>
      <span><span>하</span></span>
      <span><span>세</span></span>
      <span><span>요</span></span>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="js/plugins.js"></script>
<script>

  let textTimeLine = gsap.timeline({
    repeat: -1,    // 무한반복
    repeatDelay: 1 // 반복과 반복사이에 1초 쉰다.
  })
  
  // 아래에서 순차적으로 안녕하세요 올라옴
  textTimeLine.from('.section1__text > span > span' , {duration: 1, y: 300, stagger: 0.2})
 
 // 1초 쉬었다가, 위로 올라가는데, 방향은 거꾸로 요세하녕안 순으로 올라감
  textTimeLine.to('.section1__text > span > span' , 
  {duration: 1, y: -300, stagger: {each: 0.2, from: 'end'}}, "+=1")

</script>
</body>
</html>