타이밍과 이징

⏱️ 시간과 움직임의 질감을 다루다

애니메이션이 얼마나 오래 지속될지(duration), 언제 시작할지(delay), 그리고 움직임의 질감은 어떨지(ease)를 제어하는 것은 애니메이션의 퀄리티를 결정짓습니다.

duration: 애니메이션 진행 시간 (초 단위)
delay: 시작 전 대기 시간 (초 단위)
ease: 가속도 그래프. 기본값은 power1.out(점점 느려짐)이며, linear(일정함), bounce, elastic 등 다양한 이징 함수를 제공합니다.

탄성 조절하기: elastic.out(amplitude, period)

"elastic" 이징은 고무줄처럼 튕기는 효과를 줍니다. 괄호 안에 두 개의 숫자를 넣어 탄성의 강도와 튕기는 횟수를 디테일하게 조절할 수 있습니다.
예: ease: "elastic.out(1, 0.3)"

첫 번째 숫자 (Amplitude - 진폭): 얼마나 멀리 튕겨 나갈지를 결정합니다.
(기본값: 1, 숫자가 커질수록 목표 위치를 크게 벗어나 요동칩니다.)
두 번째 숫자 (Period - 주기): 얼마나 촘촘하게(자주) 튕길지를 결정합니다.
(기본값: 0.3, 숫자가 작아질수록 진동이 빠르고 잔떨림이 많아집니다. 0.1 정도로 낮추면 기타줄을 튕기는 것처럼 바르르 떨립니다.)


            // 크고 부드럽게 튕기는 효과

            ease: "elastic.out(1.5, 0.5)"


            // 바르르 떨리는 효과

            ease: "elastic.out(1, 0.1)"

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <div class="demo-wrapper"> <div class="track"> <span class="label">none</span> <div class="ball ball-linear"></div> </div> <div class="track"> <span class="label">bounce</span> <div class="ball ball-bounce"></div> </div> <div class="track"> <span class="label">elastic</span> <div class="ball ball-elastic"></div> </div> <button id="playBtn" class="play-btn">타이밍 비교 실행 (▶)</button> </div>

⏱️ 시간과 움직임의 질감을 다루다

duration: 애니메이션 진행 시간 (초 단위)
delay: 시작 전 대기 시간 (초 단위)
ease: 가속도 그래프. 기본값은 power1.out(점점 느려짐)이며, linear(일정함), bounce, elastic 등 다양한 이징 함수를 제공합니다.

탄성 조절하기: elastic.out(amplitude, period)

첫 번째 숫자 (Amplitude - 진폭): 얼마나 멀리 튕겨 나갈지를 결정합니다.
(기본값: 1, 숫자가 커질수록 목표 위치를 크게 벗어나 요동칩니다.)
두 번째 숫자 (Period - 주기): 얼마나 촘촘하게(자주) 튕길지를 결정합니다.
(기본값: 0.3, 숫자가 작아질수록 진동이 빠르고 잔떨림이 많아집니다. 0.1 정도로 낮추면 기타줄을 튕기는 것처럼 바르르 떨립니다.)


            // 크고 부드럽게 튕기는 효과

            ease: "elastic.out(1.5, 0.5)"


            // 바르르 떨리는 효과

            ease: "elastic.out(1, 0.1)"