Jump to content
GreenSock

Tagz

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

Go to solution Solved by ZachSaucier,

Recommended Posts

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?

 

 

 

screen.gif.4f75c15f644a91b45f1a54efe6f27a33.gif

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

Edited by Tagz
The question was not clear enough
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 😢

Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×