第一次使用gsap；不知道为什么动画不起作用

Question

const avis1 = document.getElementById('avis1');
const avis2 = document.getElementById('avis2');
const avis3 = document.getElementById('avis3');

const b1_2 = document.getElementById('b1_2');
const b2_3 = document.getElementById('b2_3');
const b2_1 = document.getElementById('b2_1');
const b3_2 = document.getElementById('b3_2');

b1_2.addEventListener('click', () => scrollAvis(avis1, avis2));
b2_3.addEventListener('click', () => scrollAvis(avis2, avis3));
b2_1.addEventListener('click', () => scrollAvis(avis2, avis1));
b3_2.addEventListener('click', () => scrollAvis(avis3, avis2));


function scrollAvis(container,targetElement){
    gsap.to(container, {
        scrollLeft: targetElement.offsetLeft, 
        duration: 0.5,
        ease: "power3.out" });
    console.log("excecuted");
}

@media screen and (max-width: 960px) {


    /****** Avis volumaprint: mobile ******/


    .avis{
        display: flex;
        flex-direction: column;
        width: 100vw;
        align-items: center;
      }
      
      .avis__sur-3__left{
        height: 6vw;
      }
      
      .avis__sur-3__right{
        height: 6vw;
      
      }
      
      .avis__sur-3s{
        display: flex;
        flex-direction: row;
        width: 100vw;
        overflow-x: auto;
      }
      
      .avis__sur-3{
        display: flex;
        width: 90vw;
        padding: 0 5vw;
        flex-direction: row;
        align-items:center;
        flex-shrink: 0;
      }
      
      .avis__sur-3__corp{
        display: flex;
        padding: 10vw 0vw;
        flex-direction: column;
        align-items: center;
        gap: 4vw;
      }
      
      .avis__title{
        display: flex;
        width: 194px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 14px;
        z-index: 2;
      }
      
      .avis__title__line{
        width: 195px;
        bottom: -45px;
        stroke-width: 6px;
        position:relative ;
      }
      
      .avis__title__text{
        color: #000;
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 36px; /* 180% */
      }
      
      .avis__sur-3__auteur{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
      }
      
      .avis__sur-3__auteur__text{
        color: #000;
      
        /* Body (medium) */
        font-family: Lato;
        font-size: 5vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5vw; /* 133.333% */
        text-align: center;
      }
      
      .avis__sur-3__auteur__img{
        width: 140px;
        height: 24px;
      }
      
      .avis__sur-3__text{
        color: #000;
        text-align: center;
        font-family: Montserrat;
        font-size: 4vw;
        font-style: normal;
        font-weight: 500;
        line-height: 28px; /* 175% */
      }

      
    }

    
  @media screen and (min-width: 960px) {

        /****** Avis volumaprint: desktop ******/


  .avis__sur-3__left{
    height: 3vw;
    position: relative;
  }
  
  .avis__sur-3__right{  
    height: 3vw;
    position: relative;
  
  }
  
  .avis{
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2vw 0;
    align-items: center;
    gap: 4px;
  }

  .avis__sur-3s{
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    align-items: center;
  }
  
  .avis__sur-3{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  
  .avis__sur-3__corp{
    display: flex;
    width: 90%;
    padding: 4vw 0vw;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
  }
  
  .avis__title{
    display: flex;
    width: 194px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    z-index: 2;
  }
  
  .avis__title__line{
    width: 195px;
    bottom: -45px;
    stroke-width: 6px;
    position:relative ;
    z-index: 1;
  }
  
  .avis__title__text{
    color: #000;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 180% */
  }
  
  .avis__sur-3__auteur{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
  }
  
  .avis__sur-3__auteur__text{
    color: #000;
  
    /* Body (medium) */
    font-family: Lato;
    font-size: 3vw;
    font-style: normal;
    font-weight: 500;
    line-height: 5vw; /* 133.333% */
    /* text-align: center; */
  }
  
  .avis__sur-3__auteur__img{
    width: 140px;
    height: 24px;
  }
  
  .avis__sur-3__text{
    align-self: stretch;
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 175% */
  }

}
  

 <div class="avis">
            <section class="avis__title">
                <svg class="avis__title__line" xmlns="http://www.w3.org/2000/svg" width="195" height="6" viewBox="0 0 195 6" fill="none">
                    <path d="M0 3H195" stroke="#FFF59D" stroke-width="6"/>
                </svg>
                <h2 class="avis__title__text">
                    Avis de nos clients
                </h2>
            </section>
            <div class="avis__sur-3s">
                <div id="avis1" class="avis__sur-3">
                    <img class="avis__sur-3__left" alt="" src="img/icons/arrow_circle_left-gray.svg">
                    <div class="avis__sur-3__corp">
                        <div class="avis__sur-3__auteur">
                            <p class="avis__sur-3__auteur__text">
                                GOA - Génération OPTIQ AUDIO
                            </p>
                            <img class="avis__sur-3__auteur__img" src="img/rating.png" alt="">
                        </div>
                        <p class="avis__sur-3__text">
                            “ Je loue un photocopieur depuis maintenant plusieurs années à Volumaprint, tout s'est toujours bien passé, réactivité et service au top ! Je recommande vivement!! “
                        </p>
                    </div>
                    <img id="b1_2" class="avis__sur-3__right" alt="" src="img/icons/arrow_circle_right.svg">

                </div>
                <div id="avis2" class="avis__sur-3">
                    <img id="b2_3" class="avis__sur-3__left" alt="" src="img/icons/arrow_circle_left.svg">
                    <div class="avis__sur-3__corp">
                        <div class="avis__sur-3__auteur">
                            <p class="avis__sur-3__auteur__text">
                                GOA - Génération OPTIQ AUDIO
                            </p>
                            <img class="avis__sur-3__auteur__img" src="img/rating.png" alt="">
                        </div>
                        <p class="avis__sur-3__text">
                            “ Je loue un photocopieur depuis maintenant plusieurs années à Volumaprint, tout s'est toujours bien passé, réactivité et service au top ! Je recommande vivement!! “
                        </p>
                    </div>
                    <img id="b2_1" class="avis__sur-3__right" alt="" src="img/icons/arrow_circle_right.svg">

                </div>
                <div id="avis3" class="avis__sur-3">
                    <img id="b3_2" class="avis__sur-3__left" alt="" src="img/icons/arrow_circle_left.svg">
                    <div class="avis__sur-3__corp">
                        <div class="avis__sur-3__auteur">
                            <p class="avis__sur-3__auteur__text">
                                GOA - Génération OPTIQ AUDIO
                            </p>
                            <img class="avis__sur-3__auteur__img" src="img/rating.png" alt="">
                        </div>
                        <p class="avis__sur-3__text">
                            “ Je loue un photocopieur depuis maintenant plusieurs années à Volumaprint, tout s'est toujours bien passé, réactivité et service au top ! Je recommande vivement!! “
                        </p>
                    </div>
                    <img class="avis__sur-3__right" alt="" src="img/icons/arrow_circle_right-gray.svg">
                </div>
            </div>
        </div>

函数确实执行了，但动画没有出现

这是代码：const 声明+函数

const avis1 = document.getElementById('avis1');
const avis2 = document.getElementById('avis2');
const avis3 = document.getElementById('avis3');

const b1_2 = document.getElementById('b1_2');
const b2_3 = document.getElementById('b2_3');
const b2_1 = document.getElementById('b2_1');
const b3_2 = document.getElementById('b3_2');

b1_2.addEventListener('click', () => scrollAvis(avis1, avis2));
b2_3.addEventListener('click', () => scrollAvis(avis2, avis3));
b2_1.addEventListener('click', () => scrollAvis(avis2, avis1));
b3_2.addEventListener('click', () => scrollAvis(avis3, avis2));


function scrollAvis(container,targetElement){
    gsap.to(container, {
        scrollLeft: targetElement.offsetLeft, 
        duration: 0.5,
        ease: "power3.out" });
    console.log("excecuted");
}

我验证了 HTML 和 CSS，验证了函数是否被执行，并且确实执行了，但动画没有发生。

因为这是我第一次使用 gsap，所以我对 javascript 也比较陌生。

Answer 1

我找到了解决方案，现在完全可以工作。

console.clear(); // Start with a clean console on refesh 
gsap.registerPlugin(ScrollToPlugin);

const avis1 = document.getElementById("avis1");
const avis2 = document.getElementById("avis2");
const avis3 = document.getElementById("avis3");

const b1_2 = document.getElementById("b1_2");
const b2_3 = document.getElementById("b2_3");
const b2_1 = document.getElementById("b2_1");
const b3_2 = document.getElementById("b3_2");

b1_2.addEventListener("click", () => scrollAvis(avis1, avis2));
b2_3.addEventListener("click", () => scrollAvis(avis2, avis3));
b2_1.addEventListener("click", () => scrollAvis(avis2, avis1));
b3_2.addEventListener("click", () => scrollAvis(avis3, avis2));

function scrollAvis(container, targetElement) {
  console.warn(container);
  console.log(targetElement);
  
  gsap.to(".avis__sur-3s", {
    scrollTo: {
      x: targetElement
    },
    duration: 0.5,
    ease: "power3.out"
  });
  
}