(2)前端好好玩用 GSAP 做一個特效 - 初始環境

前言

第一篇我們當然要先來介紹一下初始環境，否則有很高機率踩到各式各樣的雷。

初始環境

雖然這一系列的範例程式碼都會放在 CodePen 上，但是考慮到有些人可能對於 CodePen 操作不熟悉，因此還是會建議在開始往下閱讀前看一下我先前寫的這一篇「十分鐘快速入門上手 CodePen（有中文翻譯）」，否則你有可能遇到一些問題是關於 CodePen 的。

而我這邊也會提供一個初始的 CodePen 環境，裡面有我準備好的一些基本設定，主要是方便你可以直接 Fork 回去自主練習，而不用每一次都要重新設定。

這個 CodePen 裡面主要載入兩個 CDN

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js
  • GSAP3 的主要 CDN
• https://cdn.tailwindcss.com
  • Tailwind CSS 的 CDN

CodePen 連結：https://codepen.io/hsiangfeng/pen/yLEYLWY

看到這邊你可能會想說：「為什麼要載入 Tailwind CSS？」

其實主要只是單純方便我們在 CodePen 上面做一些基本的排版而已，如果你不想要使用也是可以的，只要把這個 CDN 移除掉就好。

接下來建議你先在 CodePen 貼入下方程式碼，先測試一下 GSAP 能不能正常運作

<div id="box" class="w-[50px] h-[50px] bg-black rounded-lg"></div>

gsap.to('#box', { x: 100, duration: 1, repeat: -1, yoyo: true })

上方的程式碼可以先不用理會，後續才會介紹，目前只需要先確定效果是否有正常出現即可。

基本上你應該是可以看到黑色的方塊在左右來回移動，基本上只要你有看到這個效果就可以代表 CodePen 的 GSAP 與 Tailwind CSS 都有正常載入並運作，如果沒有看到的話會建議你試著排除一下再往下練習，避免之後的範例程式碼都無法正常運作。

而通常常見的問題是：

• 沒有載入 GSAP CDN
• 沒有載入 Tailwind CSS CDN

如果你確定都有載入了，但是還是沒有看到效果，那就可能是你的網路環境有問題，建議你可以試著換個網路環境再試試看。

如果對於 Tailwind CSS 不熟的話，或許哪天我也會寫的 Tailwind CSS 教學（誤）。

那麼基本的初始環境就先到這邊結束，我們下一篇見。