henriquebzn

@mvaneijgen @Rodrigo Solved it! I first tried to just use a separate timeline as @Rodrigo suggested, it didn't work, but then I also wrapped this separate timeline in a setTimeout and it fixed it!

@Rodrigo I already did everything you asked before you asked. I obviously didn't include my whole project and I obviously tried to isolate the issue as much as I could. The only thing I didn't do was create the codepen. I tried, but it seems that the codepen won't accept the image unless I pay for the pro version. You said that there could be several things that could be causing this and you mentioned HTML and CSS. That's kind of obvious too. I'm not using any other dependencies except for GSAP. My project consists of HTML, CSS and Javascript (with GSAP) only.

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