MotionPath是GSAP的套件之一，主要用途是讓物件跟著線跑動，可以做出一些很特別的動畫。

MotionPath 的基礎操作

因為是套件所以需要另外呼叫

gsap.registerPlugin(MotionPathPlugin);

呼叫完之後你必須要設定一個想被Observer套用的行為模式

gsap.to(".b", { // 要動的物件
	duration: 1.75,
	ease: "linear",
	motionPath: {
		path: ".path", // 追蹤的線(線為svg裡面的path)
		align: ".path", // 基準點的物件
		alignOrigin: [0, 0], // 基準點，[0, 0]代表center center的意思
	},
});

案例研究

MotionPath操作起來很直觀簡單，但是他有一個大缺點是不會跟隨著螢幕大小變化去更新路徑的變化，如果偵測到resize就重新整理網頁不是一個很好的用戶體驗。

progress()是用來記錄目前的動畫進度，0代表開始、1代表結束。這邊利用progress()紀錄上次的動畫進度，以防在resize更新動畫跳回一開始的狀態。

let progress = 0;
if (tween) {
	progress = tween.progress(); // 在載入動畫的情況下才更新progress
}

tween.progress(progress); // 載入上次的進度

另外一個小巧思是，物件在gsap還沒有載入的時候會在螢幕左上方很醜，所以這邊預設一開始是看不到的，等到載入好再顯示物件。

tween.set(".airplane", {
	duration: 0.2,
	opacity: 1,
}).to(".airplane", {
	duration: 10,
	ease: "linear",
	repeat: -1, // 無限循環
	motionPath: {
	duration: 10,
	ease: "linear",
	repeat: -1, // 無限循環
	motionPath: {
		start: 0.5, // 開始點
		end: -0.5, // 結束點
		offsetY: -50, // 水平平移50
		autoRotate: 180, // 會隨著斜率改變角度
		path: ".wave-path", // 抓取的軌跡
		align: ".wave-path",
		alignOrigin: [0.5, 0.5], // 垂直水平置中
	},
});

常用變數介紹

指令	型別	用途
start	Number	開始點，預設為0也就是路徑的起點
end	Number	結束點，預設為1也就是路徑的終點
path	String | Element | Array	線段的位置(svg)
align	String | Element	以哪一個元素為基準點
alignOrigin	Array	基準點的位置，[0.5, 0.5]就是center center的意思
autoRotate	Boolean | Number	是否會隨著斜率改變角度
type	String	預設為path也就是二維的，三維的為type: "cubic"
offsetX	Number	垂直平移距離
offsetY	Number	水平平移距離