[Vue, VITE] GSAP 라이브러리 설치하고 이용해보기

토끼와 거북이 경주게임을 만들었다.
기존에 있던 CSS보다 더 생동감있게 만들기 위해
GSAP 라이브러리를 설치하고 코드를 작성해보자.

1. 동작 화면

2. 라이브러리 설치

프로젝트 터미널

npm이면

npm install gsap

3. 코드

GameView.vue

<img ref="rabbitEl" src="@/assets/rabbit2.png" class="runner runner-rabbit" />
<img ref="turtleEl" src="@/assets/turtle2.png" class="runner runner-turtle" />

const rabbitEl = ref(null)
const turtleEl = ref(null)

const {
  countdown,
  message,
  reset,
  running,
  start,
  winner,
} = useRaceGame({ rabbitEl, turtleEl })

GSAP은 실제 DOM을 집어서 그 스타일을 실시간으로 바꿔준다. 그래서 GSAP을 사용하려면 진짜 DOM을 넘겨줘야한다. 그렇기에 자바스크립트로 조종할 수 있도록 GameView.vue에서 ref를 붙여서 useRaceGame으로 넘겨준다.

GameView.vue는 게임 화면만 보여주는 역할이고, 실제 움직이는 모든 로직은 useRaceGame.js에서 진행한다. GameView에서 rabbitEl, turtleEl을 useRaceGame에게 파라미터로 보내면, GameView는 DOM(화면)만 띄우고 useRaceGame은 이 요소를 받아서 GSAP으로 움직이는 권한을 갖는다.

useRaceGame.js (GSAP과 관련된 코드만)

import { gsap } from 'gsap'

설치한 라이브러리를 불러온다.

let timeline

여러 애니메이션을 시간 순서대로 묶어줄 타임라인 객체를 담을 변수이다. 새로운 경주가 시작될 때마다 이전 타임라인을 버리고 새로운 타임라인을 덮어띄워야해서 const(상수)가 아닌 let(변수)을 사용했다.

  function clear() {
    timeline?.kill()
    timeline = null

    if (rabbitEl.value) gsap.killTweensOf(rabbitEl.value)
    if (turtleEl.value) gsap.killTweensOf(turtleEl.value)
  }

  onBeforeUnmount(clear)

새로운 경주가 시작하기 직전 혹은 사용자가 이 게임 화면을 아예 떠나는 경우 clear가 발생한다. 사용자가 시작 버튼을 누르면 코드는 [ start -> reset -> clear ] 이렇게 흘런간다.

이전 게임에서 토끼나 거북이가 결승선에 들어와 있는 상태일텐데, 이때 아직 애니메이션 찌꺼기가 남아있을 수 있다. 혹은 사용자가 뒤로가기를 누르거나 다른 메뉴로 이동했다고 가정하자. 게임 화면은 사라졌지만 백그라운드에서는 토끼가 계속 달리고 있을 수도 있다. 그래서 vue가 이 컴포넌트가 꺼지기 직전 onBeforeUnmount)에 백그라운드 애미네이션까지 싹 다 죽이도록 코드를 작성했다.

  function reset() {
    clear()
    countdown.value = ''
    winner.value = ''
    status.value = 'ready'

    gsap.set([rabbitEl.value, turtleEl.value].filter(Boolean), {
      x: 0,
      y: 0,
      rotate: 0,
      scale: 1,
    })
  }

const COUNTDOWN_STEPS = ['3', '2', '1', '출발!']

출발선을 세팅하는 reset 함수이다. 경주가 시작되기 전, gsap.set을 이용해서 토끼와 거북이 위치, 각도를 0초 만에 x:0 y:0으로 되돌려 놓는다. reset이 되면, clear 함수가 실행된다. 그리고 countdown.value에 3,2,1,출발! 같은 글자 데이터를 완전히 지운다. 게임의 마지막에서 우승자 메시지가 뜨는데 그것도 지운다. status는 ready로 바꾼다.

function pickWinner() {
  const currentSeconds = new Date().getSeconds()
  return currentSeconds % 2 === 0 ? 'rabbit' : 'turtle'
}

먼저 승자를 뽑는다. 로직은 처음 짠거랑 똑같다. 현재 초가 짝수면 rabbit의 승리, 홀수면 turtle의 승리이다.

function run(nextWinner) {
    const finishX = () => window.innerWidth * 0.82

    timeline = gsap.timeline({
      defaults: {
        ease: 'power1.inOut',
      },
    })

결승선 위치는 finishX, 화면 전체 너비(window.innerWidth)에서 82% 지점을 결승선으로 설정했다. 함수 () => 형태로 작성해서 창의 크기가 변해도 항상 동적으로 맞춰지도록 했는데, 잘 될지 모르겠다. (내겐 화면이 하나이다!)

gsap.timeline( )은 여러 애니메이션을 연결해서 재생하기 위해 타임라인을 만들었다. 기본 움직임인 ease 속성값인 power1.inOut을 사용했다. 이건 나중에 gsap 라이브러리를 작성하면서 더 자세히 설명하겠다.

  if (nextWinner === 'rabbit') {
      timeline
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.42,
          y: -10,
          rotate: -4,
          duration: 2,
          ease: 'power2.out',
        }, 0)
        .to(rabbitEl.value, {
          y: 4,
          rotate: -8,
          duration: 0.65,
          ease: 'sine.inOut',
        })
        .to(rabbitEl.value, {
          y: -8,
          rotate: 3,
          duration: 0.3,
          ease: 'power2.out',
        })
        .to(rabbitEl.value, {
          x: finishX,
          y: -12,
          rotate: 3,
          duration: 2.2,
          ease: 'power3.out',
          onComplete: () => end('rabbit'),
        })
        .to(turtleEl.value, {
          x: () => window.innerWidth * 0.62,
          y: 5,
          duration: 5.8,
        }, 0)
    }

토끼가 이길때 코드이다. 출발하자마자 화면의 42% 지점까지 뛰어간다. 이게 2초 걸리도록 했다. 나무 부근까지 가면 멈춰서 약간의 움직임을 주었다. 살짝 몸을 흔드는 동작인데, 별 다른 의미는 없고 나름 있어보이고 싶어서 추가했다. 그리고 결승선으로 빠르게 달련간다. 이때 power3.out을 썼다. 도착하면 onComplete가 발동해서 end('rabbit') 함수를 부르고 경주가 끝난다.

거북이는 토끼와 동시에 출발하지만 5.8초동안 화면의 62% 지점까지 가도록 설정했다. 결승선에 닿지 못하고 끝난다.

 else {
      timeline
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.38,
          y: -10,
          duration: 2,
          ease: 'power2.out',
        }, 0)
        .to(rabbitEl.value, {
          rotate: -8,
          y: 2,
          duration: 1.1,
          ease: 'sine.inOut',
          yoyo: true,
          repeat: 1,
        })
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.68,
          y: -6,
          rotate: 2,
          duration: 2.8,
        })
        .to(turtleEl.value, {
          x: finishX,
          y: 2,
          duration: 5.7,
          ease: 'power1.out',
          onComplete: () => end('turtle'),
        }, 0)
    }
  }

거북이가 이길때 코드이다. 토끼가 화면의 38% 지점까지 간다. 아마 이 지점이 나무 부근일 것이다. 이 다음 코드에 yoyo: true가 있는데, 나무 부근에서 토끼의 움직임이 역재생되도록 한 것이다. 게임을 진행할 때 보면 토끼가 이길땐 토끼의 기울기가 한 번 움직인다. 그런데 거북이가 이길 땐 토끼의 움직임이 2번 발생한다. 이게 yoyo를 true해서 그렇다. repeat을 1로 설정해서 한번만 역재생 되도록 했다. 그다음 토끼는 다시 결승선을 향해 움직이지만 68%에서 멈추게 될 것이다.

거북이는 5.7포 동안 한결같은 걸음으로 결승선을 향해 움직인다.

4. 전체코드

useRaceGame.js

import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
import { gsap } from 'gsap'
import confetti from 'canvas-confetti'

const COUNTDOWN_STEPS = ['3', '2', '1', '출발!']

const delay = (duration) => new Promise((resolve) => window.setTimeout(resolve, duration))

function pickWinner() {
  const currentSeconds = new Date().getSeconds()
  return currentSeconds % 2 === 0 ? 'rabbit' : 'turtle'
}

export function useRaceGame({ rabbitEl, turtleEl }) {
  const countdown = ref('')
  const winner = ref('')
  const status = ref('ready')

  let timeline

  const running = computed(() => status.value === 'countdown' || status.value === 'racing')
  const message = computed(() => {
    if (winner.value === 'rabbit') return '토끼 승리!'
    if (winner.value === 'turtle') return '거북이 승리!'
    if (status.value === 'countdown') return '잠시 후 출발합니다'
    if (status.value === 'racing') return '경주 중입니다'
    return '준비 완료'
  })

  function clear() {
    timeline?.kill()
    timeline = null

    if (rabbitEl.value) gsap.killTweensOf(rabbitEl.value)
    if (turtleEl.value) gsap.killTweensOf(turtleEl.value)
  }

  function reset() {
    clear()
    countdown.value = ''
    winner.value = ''
    status.value = 'ready'

    gsap.set([rabbitEl.value, turtleEl.value].filter(Boolean), {
      x: 0,
      y: 0,
      rotate: 0,
      scale: 1,
    })
  }

  async function count() {
    status.value = 'countdown'

    for (const step of COUNTDOWN_STEPS) {
      countdown.value = step
      await delay(step === '출발!' ? 50 : 650)
    }

    countdown.value = ''
  }

  function celebrate(nextWinner) {
    const origin = nextWinner === 'rabbit'
      ? { x: 0.88, y: 0.25 }
      : { x: 0.88, y: 0.72 }

    confetti({
      particleCount: 110,
      spread: 70,
      startVelocity: 36,
      origin,
      colors: ['#d692c8', '#8caa97', '#f8d0e5', '#fbfbb4', '#ffffff'],
    })
  }

  function end(nextWinner) {
    winner.value = nextWinner
    status.value = 'finished'
    celebrate(nextWinner)
  }

  function run(nextWinner) {
    const finishX = () => window.innerWidth * 0.82

    timeline = gsap.timeline({
      defaults: {
        ease: 'power1.inOut',
      },
    })

    if (nextWinner === 'rabbit') {
      timeline
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.42,
          y: -10,
          rotate: -4,
          duration: 2,
          ease: 'power2.out',
        }, 0)
        .to(rabbitEl.value, {
          y: 4,
          rotate: -8,
          duration: 0.65,
          ease: 'sine.inOut',
        })
        .to(rabbitEl.value, {
          y: -8,
          rotate: 3,
          duration: 0.3,
          ease: 'power2.out',
        })
        .to(rabbitEl.value, {
          x: finishX,
          y: -12,
          rotate: 3,
          duration: 2.2,
          ease: 'power3.out',
          onComplete: () => end('rabbit'),
        })
        .to(turtleEl.value, {
          x: () => window.innerWidth * 0.62,
          y: 5,
          duration: 5.8,
        }, 0)
    } else {
      timeline
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.38,
          y: -10,
          duration: 2,
          ease: 'power2.out',
        }, 0)
        .to(rabbitEl.value, {
          rotate: -8,
          y: 2,
          duration: 1.1,
          ease: 'sine.inOut',
          yoyo: true,
          repeat: 1,
        })
        .to(rabbitEl.value, {
          x: () => window.innerWidth * 0.68,
          y: -6,
          rotate: 2,
          duration: 2.8,
        })
        .to(turtleEl.value, {
          x: finishX,
          y: 2,
          duration: 5.7,
          ease: 'power1.out',
          onComplete: () => end('turtle'),
        }, 0)
    }
  }

  async function start() {
    if (running.value) return

    reset()
    await nextTick()
    await count()

    status.value = 'racing'
    run(pickWinner())
  }

  onBeforeUnmount(clear)

  return {
    countdown,
    message,
    reset,
    running,
    start,
    status,
    winner,
  }
}

'💻 프로젝트 > 🐰토끼와 거북이 경주게임🐢' 카테고리의 다른 글

[Vue,VITE] canvas-confetti 라이브러리 이용하기 (0)	2026.05.29
[Vue, VITE] 토끼와 거북이 경주게임_ 기존 코드 업그레이드 시키고 사용자 화면도 바꾸기. (0)	2026.05.28
[Vue, VITE] Vercel로 서버 배포할 때 에러가 발생했다면 branch 확인해보기 (0)	2026.05.27
[Vue.js] 새로고침 쉽게 하는 방법, window.location.reload( ) (5)	2025.08.13
[Vue.js] animation과 @keyframs로 토끼와 거북이 경주게임 만들기. (8)	2025.08.12

hyeong-ing 🚀

[Vue, VITE] GSAP 라이브러리 설치하고 이용해보기

'💻 프로젝트 > 🐰토끼와 거북이 경주게임🐢' 카테고리의 다른 글

티스토리툴바

[Vue, VITE] GSAP 라이브러리 설치하고 이용해보기

'💻 프로젝트 > 🐰토끼와 거북이 경주게임🐢' 카테고리의 다른 글

관련글

티스토리툴바