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