[GSAP] js module을 통한 GSAP 사용 (사용 전 세팅 방법)

아래를 실행하기 전에는 node.js 설치가 완료되어있어야합니다.
이후 아래의 링크를 통한 사전 설정이 되어있는지 확인 후 실행 바랍니다.
node.js 사용법 - https://wanna-be-a.tistory.com/24

✨js module을 통한 GSAP 사용

terminal에서 gsap install

npm i gsap

위의 명령어 입력 시 pakage.json에 dependencies가 생성된다.

  "dependencies": {
    "gsap": "^3.11.3"
  }

html에 script 태그로 연결

<script type="module">
  import App from './src/js/index.js'
  const app = new App();
</script>

pakage.json에 아래와 같은 내용이 있는지 확인

  "main": "src/js/index.js", // 경로가 정확한지 확인
  "type": "module",

js 파일에 아래와 같은 내용 입력

import { gsap } from '/node_modules/gsap/all.js' // 경로가 정확한지 확인

export default class App { // class명은 첫글자를 대문자로 작성하는 것이 규칙

  constructor() {
    console.log('hi~'); // js파일과 html이 잘 연결 되었다면 콘솔창에 hi~가 표시됨
    gsap.registerPlugin(); // gsap를 사용할 것이라고 선언

    // 아래에 gsap관련 함수 입력
    gsap.to('div', {
      duration: 1,
      backgroundColor: '#000000',
    }); // 이 함수가 실행이 되면 gsap가 잘 연결이 된 것임

  }
}

✅위와 같은 과정에서 유의사항

• index.html이 제일 바깥 폴더에 나와있는지 확인
• index.js가 다른 폴더 안에 들어가 있는지 확인