---
tags: Gsap
---
###### tags: `gsap`
# GSAP3 to/from/formTo/set
載入 gsap主程式 js

<script src="gsap.min.js"></script>

- gsap.to("選擇器", {狀態設定});
從原來的位置 移動到 狀態設定的位置
- gsap.from("選擇器", {狀態設定});
從狀態設定的位置 移到到 原來的位置
- gsap.fromTo("選擇器", {狀態設定});
指定預設位置 移動到 指定結束位置
- gsap.set("選擇器", {狀態設定});
設定預設值

<iframe height="265" style="width: 100%;" scrolling="no" title="gsap3 move" src="https://codepen.io/juest/embed/rNMPaMN?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/juest/pen/rNMPaMN'>gsap3 move</a> by gt.juest
(<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## {狀態設定}

gsap.to(".selector", { // "選擇器", [陣列], 或 {物件}
  x: 100, // 任何屬性（不限於CSS）
  backgroundColor: "red", // css名稱駝峰式寫法
  duration: 1, // 執行動畫時間
  delay: 0.5, // 動畫開始之前的延遲秒數
  ease: "power2.inOut", // 動畫效果的速度曲線
  stagger: 0.1, // 交錯屬性，第二個動畫將在第一個開始後0.1秒開始
  paused: true, // 如果設置為true，動畫將在創建時立即暫停。默認false
  overwrite: "auto", // 默認false
  repeat: 2, // 重複的次數 (-1 無限重複)
  repeatDelay: 1, // 每次重複之間的秒數
  repeatRefresh: true, //開啟 repeatRefresh: true，會在重複執行時（設定 repeat），紀錄當前狀態再執行，而不會回到初始狀態。
  yoyo: true, // 為true動畫將往返執行。默認false
  yoyoEase: true, //  或使用動畫效果的速度曲線。默認false
  keyframes: [
    { duration: 1, x: 100, },
    { duration: 1, y: 100 },
    { duration: 1, rotation: 360 },
  ],
  immediateRender: false,
  onComplete: myFunc,
  // other callbacks: 
  // onStart, onUpdate, onRepeat, onReverseComplete
  // Each callback has a params property as well
  // i.e. onUpdateParams (Array)
});

> ### ease: "power2.inOut"
https://greensock.com/docs/v3/Eases

> ### stagger: 0.1 交錯屬性
https://greensock.com/docs/v3/Staggers
- 簡單

sap.to(".box", {
  y: 100,
  stagger: 0.1 // 每個.box下的元素動畫之間的間隔0.1秒
});

- 物件(高級)

gsap.to(".box", {
  y: 100,
  stagger: {
    each: 0.1, // 每個動畫之間的間隔時間
    from: "center", // 開始位置
    grid: "auto",
    axis: "x",
    ease: "power2.inOut",
    repeat: -1 // 執行次數，-1為重複執行
  }
});

- 函數(高級)

gsap.to(".box", {
  y: 100,
  stagger: function(index, target, list) {
    ...
    return index * 0.1;
  }
});

> ### repeat: 2, yoyo: true
repeat: 2 // 執行次數2次，-1為重複執行
如果設置yoyo為true，那麼重複的動畫將往返進行。默認為false。
<iframe height="265" style="width: 100%;" scrolling="no" title="gsap3 yoyo" src="https://codepen.io/juest/embed/PoGVqWv?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/juest/pen/PoGVqWv'>gsap3 yoyo</a> by gt.juest
(<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>