ScrollTrigger - When scrolling up a pinned div it skips and leaves a blank space

[Tagz]

Hello! I'm very new to this, i'm sorry if this is dumb.

The title says it the best i can write it in english.

I'm not entirely sure if the codepen is replicating this issue accurately (You have to scroll very fast to notice it), so i'll leave an animated gif of what's happening on my end.
This "bug" happens in Chrome and Edge, but not in firefox.

 

Edit:

I'm sorry for not making my question clearer earlier, my english and my technical knowledge is very limited.

My real problem is that when i scroll up, that circle with the random image rotating behind kind of flickers and leaves an empty space at the top for like one frame.
It's like the circle doesn't immediately realize that it's pinned for a moment and quickly adjusts it's position.
In my codepen you can't really see it if you just scroll with the mouse wheel, but if you grab the scroll bar you will notice that ugly flicker.
My question is, why does that happen and how can i fix it or at least hide it?

 

 

 

See the Pen vYXPpJg by Tagz4everyone (@Tagz4everyone) on CodePen

Edited January 20, 2021 by Tagz
The question was not clear enough

[Abi Rana]

This is just how your scrollTrigger has been setup.

gsap.to(".shipping-section__vertical-container", {
  scrollTrigger: {
    trigger: ".shipping-section__globe-container",
    start: "top top",
    end: "400% top",
    markers: true,
    pin: true
  }
});

You scrollTrigger ends when it reached at the top of the viewport. So for end value you should set it for "400% bottom" like below. Just change the end value only.

 

gsap.to(".shipping-section__vertical-container", {
  scrollTrigger: {
    trigger: ".shipping-section__globe-container",
    start: "top top",
    end: "400% bottom",
    markers: true,
    pin: true
  }
});

 

By the way, you do have one separate div in the HTML with some height, I guess that is intended

[Tagz]

26 minutes ago, Abi Rana said:

This is just how your scrollTrigger has been setup.

gsap.to(".shipping-section__vertical-container", {
  scrollTrigger: {
    trigger: ".shipping-section__globe-container",
    start: "top top",
    end: "400% top",
    markers: true,
    pin: true
  }
});

You scrollTrigger ends when it reached at the top of the viewport. So for end value you should set it for "400% bottom" like below. Just change the end value only.

 

gsap.to(".shipping-section__vertical-container", {
  scrollTrigger: {
    trigger: ".shipping-section__globe-container",
    start: "top top",
    end: "400% bottom",
    markers: true,
    pin: true
  }
});

 

By the way, you do have one separate div in the HTML with some height, I guess that is intended

That empty div was so the skip at the top of the circle was noticeable when scrolling.
I'm sorry for not making my question clearer earlier, my english and my technical knowledge is very limited.

My real problem, and this is something i'm going to edit in the post, is that when i scroll up, that circle with the random image rotating behind kind of flickers and leaves an empty space at the top for like one frame.
It's like the circle doesn't immediately realize that it's pinned for a moment and quickly adjusts it's position.
In my codepen you can't really see it if you just scroll with the mouse wheel, but if you grab the scroll bar you will notice that ugly flicker.
My question is, why does that happen and how can i fix it or at least hide it?

[ZachSaucier]

Hey Tagz and welcome to the GreenSock forums.

 

6 hours ago, Tagz said:

when i scroll up, that circle with the random image rotating behind kind of flickers and leaves an empty space at the top for like one frame.

Perhaps using anticipatePin: 1 or a similar value can help limit this jump. You can read more about it in the docs.

[Tagz]

1 hour ago, ZachSaucier said:

Hey Tagz and welcome to the GreenSock forums.

 

Perhaps using anticipatePin: 1 or a similar value can help limit this jump. You can read more about it in the docs.

I tried different values, but it doesn't change that much... i don't think it's different from before 😢

[ZachSaucier]

My guess is that your element is "heavy" meaning takes time to render. And since scrolling is handled in a different thread than the main JS one, they can't be perfectly synced. That's why anticipatePin exists to try and handle the transition between pinned and non-pinned as best as we can.

 

If all that you're doing with the ScrollTrigger is pinning it perhaps you can get away with just using position: sticky.

 

I don't know that we can be of much more help, especially without a minimal demo that recreates the issue.

[Tagz]

18 minutes ago, ZachSaucier said:

My guess is that your element is "heavy" meaning takes time to render. And since scrolling is handled in a different thread than the main JS one, they can't be perfectly synced. That's why anticipatePin exists to try and handle the transition between pinned and non-pinned as best as we can.

 

If all that you're doing with the ScrollTrigger is pinning it perhaps you can get away with just using position: sticky.

 

I don't know that we can be of much more help, especially without a minimal demo that recreates the issue.

Yeah, i figured.
Thank you very much for your time, i'll try position sticky to recreate it.