Jumping Elements when Pinning

[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!

 

[Rodrigo]

Hi,

 

Is really hard to debug live sites since we can't test the code and see what could be the issue.

 

A few pointers:

• You're using version 3.11.4, try updating to 3.11.5 and see how it works.
• Try without the anticipate pin
• You mention that you can't replicate this in Codepen. That tells us that something else in your setup is causing this. If none of the above solves the issue, start removing the other sections or features one by one until it works and you'll know where to look at.

Sorry I can't be of more assistance.

Happy Tweening!

[GreenSock]

You're loading GSAP and ScrollTrigger twice on that page. I definitely wouldn't do that. 

 

Like Rodrigo said, it's not feasible for us to troubleshoot a live site like that, but the only other thing I've seen in that past that can cause a jump is if you've got collapsing margins. Like if your element has margin-top: 20px, for example, and it's the first child inside a container that has no border-top or padding-top, so its margin leaks OUTSIDE that container element and then when it gets pinned, that margin suddenly gets properly contained, and it shifts accordingly. I'm totally guessing here - I have no idea if that has anything to do with your issue. I figured I'd share the info, though, so that you can look into that. I'd definitely update to 3.11.5 too. 

 

Good luck!