ScrollTrigger - pin jumps/snaps on triggering

[knalle]

Unfortunately I cannot make a simple CodePen, that has the same issue.

And since the website is under construction sharing it here isn't possible - so the attached GIF is the best I can do

 

Any ideas on why this happens?

 

I have this code that gets my sections with data-pinned attribute:

gsap.utils.toArray('[data-pinned]').forEach(function(elem) {
        ScrollTrigger.create({
            trigger: elem,
            start: "top top",
            pin: true, 
            markers: true,
            pinSpacing: false,
        });
    });

 

[akapowl]

 

Hey @knalle

 

5 minutes ago, knalle said:

Any ideas on why this happens?

 

You mean the 'jumping'?

 

Have you tried the following already?

 

anticipatePin

Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0).

 

 

from the docs

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

[GreenSock]

My guess is that this is a collapsing margin issue. Imagine two divs vertically butted up to each other, and then you add margin: 10px. How much space is between them now? Well one might think it'd be 20px (10px on the bottom of one plus 10px on the top of the other), but margins collapse, so it'd only be 10px. However, if you wrap each of them in another <div> that either has ANY padding or a border (or several other criteria), BOOM, the margins don't collapse anymore. 

 

When an element gets pinned, it's placed inside a container <div> which is likely causing any margin that you had on your element to push against that container <div> and/or eliminate the collapsing margin. 

 

Try getting rid of margins on that element - does it resolve things? You can work around collapsing margins in other ways too, like have a 1px transparent border-top or 1px of padding, for example. But yeah, judging by that gif, my bet is that it's margin-related. 

[knalle]

@akapowl I tried that earlier and it did not help - but thank you for the quick reply! @GreenSock you were absolutely right on the money margin! It was the margin on the H1 ("FIX AREA" in the gif) that caused the jump! 😅

 

It should definitely be on the "Most Common ScrollTrigger Mistakes" list

[GreenSock]

Glad that diagnosis was correct. Ha. 

 

6 minutes ago, knalle said:

It should definitely be on the "Most Common ScrollTrigger Mistakes" list

It's actually quite uncommon thus far. I think you're only the second person we've seen run into that. And it's not really a bug or anything - just the nature of the beast. But yeah, if this pops up more often, it'll earn a spot in the "most common ScrollTrigger mistakes" article

[knalle]

@GreenSock Btw, how can I ease the "stick to top"? So the pinning is more "anticipated" and landing softly.

 

Perhaps using another trigger and tweening the content of the pinned element?

[GreenSock]

Frankly, I don't think that's feasible. I don't have time to dig into it right now, but suffice it to say that you CANNOT just use transforms in a scenario like this and "ease" things into being pinned because browsers do scrolling on a different thread, so you'll end up seeing a bunch of vibration. And if you "gradually" pin, what would that even look like for the surrounding content? It's basically taking that element out of the document flow, making it position: fixed, and propping the resulting gap open in the normal document flow, so what would be above the "gradually pinning" area before it closes the gap? Nothingness? And something is either position: fixed or it's not - there's not really a way to gradually "tween" from position: relative to position: fixed, although we are working on a plugin that can give that illusion in some cases. I just don't think it's feasible in a scrolling scenario like this. 

 

With a few days of experimenting, something may be possible, but I'm doubtful. Gotta run to Thanksgiving dinner. 

[DWingoGSU]

Hi, I had a question, the same as another post a while back. I have some parallax sections I'm using the scrollTrigger on. When the user scrolls into the sections, the background pins into place and the blue foreground box with text keeps scrolls til it's about center viewport then the pin releases and they are able to scroll to the next section. 

I'm having a problem with the pinned background jumping on fast scrolls when it moves into place. It doesn't happen with slow scrolls, only fast scrolls.

 

The code is below. 

<script type="text/javascript">

gsap.registerPlugin(ScrollTrigger);

gsap.to(".blue-sec-editorial-1", {y: 500, duration: 3, ease: "circ.out"});

gsap.to(".blue-sec-editorial-2", {y: 500, duration: 3, ease: "circ.out"});

gsap.to(".blue-sec-editorial-3", {y: 500, duration: 3, ease: "circ.out"});


const storytl = gsap.timeline();
storytl.fromTo(".blue-sec-editorial-1", {y: 500},{y: 0, duration: 5});

const storytl2 = gsap.timeline();
storytl2.fromTo(".blue-sec-editorial-2", {y: 500},{y: 0, duration: 5});

const storytl3 = gsap.timeline();
storytl3.fromTo(".blue-sec-editorial-3", {y: 500},{y: 0, duration: 5});


ScrollTrigger.create({
animation: storytl,
    trigger: ".panel-1",
start: "top top", 
    end: "bottom top",
    scrub: 1.5,
    ease: "none",
pin: ".panel-1",
anticipatePin: 0,
toggleActions: "restart reverse restart reverse",
})

ScrollTrigger.create({
animation: storytl2,
    trigger: ".panel-2",
start: "top top", 
    end: "bottom top",
    scrub: 1.5,
    ease: "none",
pin: ".panel-2",
anticipatePin: 0,
toggleActions: "restart reverse restart reverse",
})

ScrollTrigger.create({
animation: storytl3,
    trigger: ".panel-3",
start: "top top", 
    end: "bottom top",
    scrub: 1.5,
    ease: "none",
pin: ".panel-3",
anticipatePin: 0,
toggleActions: "restart reverse restart reverse",
})



</script>

 

[mvaneijgen]

Hi @DWingoGSU can you please create a minimal demo demonstrating your issue. (below a template you can fork), also maybe create your own topic, o need to bother all these people three years later. Just reverence the topic if you think it is relevant. 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen