nikoschaffmann

Hi there, I have a problem using GSAP's ScrollTrigger. As soon as I pin the element, it jumps a good amount of px. I tried using my code in a Codepen but it could not be replicated. Also, I tried using differend GSAP pins on different pages, but it's the same result on every page. The website in question is https://jumatea.eu/pages/entdecke-guayusa?view=landingpage but you can see the occuring problem in the attached video. I'd be extremely thankful for any kind of help as I just don't get why it happens. Here's the code I use: $(document).ready(function () { gsap.registerPlugin(ScrollTrigger) ScrollTrigger.matchMedia({ // desktop "(min-width: 1024px)": function () { var vergleichElemente = $(".landing__vergleiche").toArray() var hoehen = [] vergleichElemente.forEach((vEl) => { hoehen.push($(vEl).outerHeight()); }); var dasElement = $(".mitschwebender-parent"); var bildschirmHoehe = window.innerHeight; var letztesHoehenElement = hoehen[hoehen.length - 1] var finaleLaufweiteDesElements = hoehen.reduce((partialSum, a) => partialSum + a, 0) - (hoehen[0] / 2) - (letztesHoehenElement / 2) gsap.to($(".mitschwebendes-element"), { scrollTrigger: { trigger: dasElement, start: "center center", end: "+=" + finaleLaufweiteDesElements + "px", pin: true, scrub: true, anticipatePin: 1 } }); } }); }); Did I make any syntax errors? I can surely say it has nothing to do with these weird looking calculations as other GSAP elements on other pages have the same problem. Thanks in advance! Bildschirmaufnahme 2023-03-22 um 14.23.46.mp4

Hi there Over the last month, I developed two different animated websites using GSAP, ScrollTrigger & Locomotive Scroll. Only one of those projects uses Locomotive Scroll, so I can tell for sure that this has nothing to do with my issue. Everything works fine, just as expected. Except for the tablet view. I've tried it on the iPad Pro 12.9" 2. Gen and there are just so many bugs. My question is if there is a way to handle this? I feel like I searched through the whole web and no one got the same issues that I got... The website is built with Wordpress Elementor, but the other project with similar bugs is coded in Shopify's Liquid code. The URL of the website is https://lh.your-new-website.de/. To be more precise, the pin space section do not work properly on tablet. I'm very thankful for any kind of help!