我的目標是讓一個圖像按照用戶滾輪的方向旋轉。

而我設法做到了，但它打破了定位(有時)。

有時候，當我加載頁面時，一切都很好:圖像正確地水平和垂直居中。但有時當我加載頁面時，圖像僅水平居中，而不是垂直居中。

這里有一個例子:

集中

不居中

我認為這是因為圖像的父元素是& quot主& quot元素，并且它還顯示了一個動畫(所以這個圖像被動畫化了兩次，我猜)。但是我還是不知道怎么修。

CSS:

.wavySectionContainer {
  height: 800px;
  width: vw;
  background-color: var(--primary);
  position: relative;
}

.aboutMe,
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML:

<div class="wavySectionContainer">
    <img class="sun"  src="public/sun.png" alt="Wave">
    <p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>

Javascript:

gsap
  .timeline()
  .from(["main", "footer"], { y: "10%", autoAlpha: 0 })
  .to(".sun", {
    scrollTrigger: {
      trigger: ".wavySectionContainer",
      scrub: true,
    },
    rotation: 360,
    duration: 2,
    ease: "none",
  });

修好了！

我只需要為旋轉動畫使用一個單獨的時間線，并將其包裝在一個setTimeout函數(shù)中，以便它只在主時間線結束時才開始。