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

前言

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

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

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

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

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

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

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

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

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

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

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

而通常常見的問題是：

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

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

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