ScrollTrigger Timeline Animation Jumping at End - Elementor Pro Site

[dc005]

I'm experiencing a jumping/snapping issue at the end of my ScrollTrigger timeline animation. The animation works smoothly throughout the scroll, but when it reaches the end, there's an abrupt jump/snap back.

 

Environment

• CMS: WordPress with Elementor pro
• GSAP Version: 3.12.2 (loaded via CDN)
• Site: https://signatureglobal.com/scrolltigger-animation/
  
  HTML Generated-:

<div class="experience">

<div class="experience_inner"><!-- First slide content -->

<!-- Images and content -->

</div>

<div class=" experience_inner experience_inner02  amenity"> <!-- Second slide content -->

<!-- Images and content -->

</div>

<div class="experience_inner experience_inner03  highlight"> <!-- Third slide content -->

<!-- Images and content -->

</div>

</div>

 

CSS:
 

.experience{   height: 100vh;    width: 100%;    position: relative;overflow:hidden}



.experience_inner{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .experience_inner1 { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; z-index: 9; padding: 0; } .experience_inner02 { z-index: 10; } .experience_inner03 { z-index: 11; } .amenity, .highlight { transform: translateY(100%); will-change: transform; backface-visibility: hidden; }

JavaScript (Original):

window.addEventListener("load", function () {
  gsap.registerPlugin(ScrollTrigger);

   
var pinT2 = gsap.timeline({
    scrollTrigger: { 
        trigger: ".experience",
        pin: true,
        start: 'top top',
        markers: true,
        end: "+=" + (window.innerHeight * 3.5),
        scrub: 2,
//         ease: "slow",
                }
})
.to(".amenity", { ease: "power1.inOut", y: 0, duration: 2,delay: 1})
.to(".highlight", {ease: "power1.inOut",y:0, duration: 2,delay: 1});
      
  ScrollTrigger.refresh();
});

Animation works smoothly until the very end, where there's a noticeable jump/snap, suggesting the elements are being reset or repositioned unexpectedly.

Any insights or alternative approaches would be greatly appreciated! Thanks in advance for your help. I can create a simplified CodePen if needed, though the issue might be specific to the Elementor environment.

 

[GreenSock]

A CodePen would definitely improve your chances of getting a prompt and accurate answer but my guess is that Elementor is adding CSS transitions to your elements which is a very bad thing. If you try animating an element that has CSS transitions with JavaScript, every time a property gets set via JavaScript, the browser will refuse to apply it because it'll drag that out over time due to the CSS transition. It's terrible for performance too. So I'd strongly recommend setting up your CSS to override the transition that Elementor applies by default. Also, Elementor adds scroll-behavior: smooth to the main page which is a bad thing. It's the same idea as CSS transitions but for the scroll position. It interferes with ScrollTrigger's ability to accurately set and measure scroll-related positions. So fix your CSS transitions and your scroll-behavior CSS and my guess is the problem will vanish. If you still need help, just post back here with a CodePen demo. Good luck! 

[dc005]

Thank you so much for the detailed response! This makes perfect sense and explains exactly what I was experiencing. You're absolutely right about Elementor adding conflicting CSS. I  disabled transitions and smooth-scroll behavior, and it worked. This explains why my animations were working smoothly during the scroll but jumping at the end.

 

Really appreciate the insight. Thanks again!