Tagz
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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 😢
-
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? -
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
ScrollTrigger - When scrolling up a pinned div it skips and leaves a blank space
in GSAP
Posted
Yeah, i figured.
Thank you very much for your time, i'll try position sticky to recreate it.