Search the Community

Hi everyone, I’m encountering an issue with GSAP’s ScrollTrigger where a section jumps when unpinning, and I’m looking for some guidance or a solution. Problem: I have a section that is pinned using ScrollTrigger while scrolling, but when the pinning ends (unpins), the section seems to "jump" or shift unexpectedly. The behavior happens when the scroll reaches the end point defined in the ScrollTrigger. I am also using scrub for smooth scrolling, and pinSpacing: false to prevent extra space for the pinned element. May refer to the section via https://cantal.bluecube.com.sg/sectors/ Here attached the CSS that I used: .scrolling-cards { overflow: hidden !important; position: relative !important; } .scrolling-cards-header-wrapper { height: 100vh !important; left: 0; position: relative !important; top: 0; width: 100% !important; } .scrolling-cards-header { height: 100vh; left: 0; position: absolute; top: 0; width: 100%; } .scrolling-cards-image { height: 100vh !important; left: 0; position: absolute !important; top: 0; width: 100% !important; } .scrolling-cards-image:after { background: #000; content: ""; height: 100%; left: 0; opacity: .3; position: absolute; top: 0; width: 100%; } .scrolling-cards-image img { height: 100vh !important; object-fit: cover !important; } .scrolling-cards-title { position: fixed !important; top: 0; left: 0; width: 50% !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 50px !important; z-index: 10 !important; } .scrolling-cards-item { height: 100vh !important; position: relative !important; width: 100% !important; } .scrolling-cards-card { background-color: #FFF; padding: 50px !important; position: absolute !important; right: 50% !important;; top: 50% !important; transform: translateX(50%); width: 580px !important; z-index: 2 !important; } .scrolling-cards-card p:last-child { margin-bottom: 0; } @media screen and (min-width: 1024px) { .scrolling-cards-title { justify-content: center !important; padding: 0 0 0 calc((100vw - 1180px) / 2 + 20px) !important; width: 48vw !important; } .scrolling-cards-card { max-width: calc(50% - 20px); right: calc((100vw - 1180px) / 2 - 20px) !important; /* top: 250px !important; */ transform: translateY(-50%); } } @media screen and (max-width: 1024px) { .scrolling-cards-title { width: 100% !important; justify-content: unset !important; padding-left: 23px !important; padding-right: 23px !important; } .scrolling-cards-card { left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 46px) !important; padding: 30px 25px !important; } } And here is the gsap script that I used: document.addEventListener("DOMContentLoaded", function () { gsap.registerPlugin(ScrollTrigger); const cards = gsap.utils.toArray(".scrolling-cards-item"); const images = gsap.utils.toArray(".scrolling-cards-image"); if (cards.length > 1 && !document.body.classList.contains("wp-admin")) { const tl = gsap.timeline({ scrollTrigger: { trigger: ".scrolling-cards", pin: ".scrolling-cards-header", start: "top top", end: "bottom bottom", scrub: 1, anticipatePin: 1, pinSpacing: false, markers: true } }); cards.forEach((cardWrapper, i) => { const card = cardWrapper.querySelector(".scrolling-cards-card"); const image = images[i]; const prevCard = i > 0 ? cards[i - 1].querySelector(".scrolling-cards-card") : null; const baseTime = i * 1.5 ; // Fade in background image (if not the first) if (i!==0) { tl.from(image, { autoAlpha: 0, duration: 1 }, baseTime); } // Fade in card // if (i !== 0) { tl.from(card, { autoAlpha: 0, y: 60, duration: 0.5 }, baseTime + 0.5); // } // Fade out previous card (if not the first) if (i > 0 && prevCard) { tl.to(prevCard, { autoAlpha: 0, y: -60, duration: 0.5 }, baseTime); } }); } }); The Issue: When the scroll reaches the end of the ScrollTrigger, the section "jumps" or shifts suddenly as the pin is released. I suspect this might be related to the CSS positioning (position: fixed on .scrolling-cards-title) and overflow: hidden on the parent .scrolling-cards. What I’ve Tried: I’ve tried adjusting the pinSpacing setting (true and false), but the jump still happens. Removing the overflow: hidden style from .scrolling-cards does not resolve the issue either. The jump seems to occur at the end of the ScrollTrigger, right before the element unpins.

Hello, First off, I just want to say how excited I am about GSAP going completely free for everyone—thanks to Webflow’s support. The community is buzzing, and I honestly can’t wait to see what’s coming next! I’m reaching out for some guidance and clarification as I prepare to dive into a new personal project that will heavily rely on GSAP animations, along with WordPress and Elementor Pro. 🔧 Project Setup – My Current Plan The project will involve a variety of animations and page-level interactions. Here's a brief outline of how I plan to manage everything: ----------- Layer Purpose Key Tools / Locations Local Dev Safe playground for building & testing. Local by Flywheel → (my local Browser URL) running Hello Elementor + Hello Child Theme. Source Code Modular animation code & global styles. hello-theme-child-master/src/… • js/animations/*/index.js • css/animations/*.css • js/app.js (aggregator) Bundling Turn scattered modules into a single, optimized payload. Webpack (installed via npm) + custom webpack.config.js; output enqueued by PHP. Version Control Single source of truth & change history. Git (repo lives in child‑theme folder) → push to GitHub main via VS Code’s Git Bash. Deployment Ship the latest build to production with one click. WP Pusher (monitors main branch). After each push, click Update in WP Pusher. Runtime (Browser) Execute GSAP timelines inside Elementor’s markup. GSAP CDN + your compiled app.js & animation CSS, loaded in the order you defined. ----------- ❓My Main Question Is this the right approach for a GSAP-heavy WordPress project using Elementor, or would it be more practical to simply use a Code Snippet Manager plugin and embed everything there? I’m aiming to be as structured and intentional as possible from the start, but if this direction is overcomplicating things, I’d rather adjust now than burn time later. Your insight would be invaluable and honestly a huge time-saver. I deeply appreciate your time, and apologies for the long message — I just wanted to provide full context. Looking forward to your response. Warm regards, George

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

Hi, I’m using GSAP club plugins on my WordPress website, installing it by putting the plugins into the directory via FTP and link it in the <head> section of the page through Elementor Custom Code like: <script src="my-url/MorphSVGPlugin.min.js"></script> My GSAP animation works fine invidually but now I noticed when I put 2 GSAP elements on the same page(I put them in custom HTML widget), only the first one work. Not sure if I installed it incorrectly or if I have to do anything else. Does anyone have the same issue?

Hello, I'm working with Elementor. In the beginning, everything works perfectly, but lately, there is a jump in the pinned element check this web for example. Any ideas why????? Please help :)