How to prevent this GSAP animation from breaking my absolute positioning?

Question

My objective is to make an image rotate in the same orientation as the user's scroll wheel.

And I managed to do it, but it breaks the positioning (sometimes).

Sometimes when I load the page everything works fine: the image is correctly centered both horizontally and vertically. But sometimes when I load the page the image is centered only horizontally and not vertically.

Here's an example:

Centered

Not centered

I think this is happening because the parent element of the image is the "main" element and it is also displayed with an animation (so the image is animated 2 times, I guess). But I still don't know how to fix it.

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",
  });

Answer 1

Fixed it!

I just had to use a separate timeline for the rotation animation and wrap it in a setTimeout function so that it only starts once the main timeline finishes.