GSAP scrollTrigger + swiper
===
>:point_right: <font color="blue">緣由</font>
>
>使用 GSAP 試做如何達成此效果
>* 滾動滑鼠滾輪達成左圖右圖同時切換
>* 左文右圓圈同時切換
>
> 範例效果:
landor and fitch : https://landorandfitch.com/en

---
### 左文右圖

#圖片擷取至 landor and fitch : https://landorandfitch.com/en

### 左文右圓圈

#圖片擷取至 landor and fitch : https://landorandfitch.com/en

---

>:bulb: <font color="blue">想法</font>
>
>使用GSAP scrollTrigger固定動畫執行位置
>搭配swiper滾輪onchange事件改變同時切換

### 建置
目前先以CDN方式引入
<font color="orangered">css</font>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">

<font color="orangered">javascript</font>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="assets/gsap/gsap.js"></script>
<script src="assets/gsap/scrollTrigger.js"></script>

---

### GSAP方法

gsap.registerPlugin(ScrollTrigger);
gsap.to("目標物件", {
  opacity: 1,
  scrollTrigger: {
    trigger: "觸發物件", //觸發得物件
    start: "center center", // (物件開始位置, 卷軸開始位置) top center bottom px
    end: "240%", //(物件結束位置, 卷軸結束位置) , 也可以設卷軸捲動多少結束動畫
    scrub: true, // 物件動畫根據卷軸捲動程度跑
    pin: true, // 物件執行完動畫會跟著卷軸走，類似 fixed-top
    markers: true, // 顯示標記
  },
});

### 文字與圓圈切換

var circle = document.getElementById('svgCircle');
var swiper = new Swiper('.c-swiper', {
  speed: 1000,
  direction: 'vertical',
  loop: false,
  mousewheel: {
    releaseOnEdges: true,
  },
  pagination: {
    clickable: true,
  },
  on:{
    slideChange: function(){
      // 針對目前輪到index去判斷改變右邊圓圈樣式
      switch(this.activeIndex){
        case 0:
          circle.style.transform = 'rotate(0deg)';
          document.getElementById('yellow').style.transform = 'scale(1.06)';
          document.getElementById('green').style.transform = 'scale(1)';
          document.getElementById('blue').style.transform = 'scale(1)';
          break
        case 1:
          circle.style.transform = 'rotate(60deg)';
          document.getElementById('green').style.transform = 'scale(1.06)';
          document.getElementById('yellow').style.transform = 'scale(1)';
          document.getElementById('blue').style.transform = 'scale(1)';
          break
        case 2:
          circle.style.transform = 'rotate(120deg)';
          document.getElementById('blue').style.transform = 'scale(1.06)';
          document.getElementById('green').style.transform = 'scale(1)';
          document.getElementById('yellow').style.transform = 'scale(1)';
          break
        default: 
          return
      }
    },
  },
});

---

### 問題與討論
1.動畫執行區間高度
2.左文又圓圈區塊觸發位置僅限文字區塊

---

### Demo
http://demo.grnet.com.tw/grnet_effect_collection/gsap_scrollTrigger/demo.html