Search the Community

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.

Hi GSAP lovers, I've created this hero section that plays a video when you scroll down and reverses it when you scroll up. I achieved this using Elementors native video widget and without HTML, CSS only a few lines of JavaScript linked to GSAP ofc. Everything works as expected and looks really cool, but for some reason, the video lags a bit when scrolling. It’s not a lot, but it's noticeable. Does anyone have ideas on how to fix this? I’ve checked the code, and I don’t think it’s the issue. Could it be related to the number of frames in the video? If so, what would be the optimal frame rate? I’m currently using 30 fps. By the way, I made a detailed YouTube video showing how I did this, if you’re interested: https://www.youtube.com/watch?v=s7n9vRFvmM0&list=PLrBEiKv9M1MbqfCUginEzRdiA6bTfiC-K&index=1 Elementor GSAP scroll-community (1).mp4