Slight jump when pinning

[artildo]

Hello! When I scroll til the pin, my animation shatters a bit, like it is scrolled more than needed and it jumps back to the pin. Please see the video (the top of the map) https://youtu.be/3EaktDx3N_M

What can I do to just fix the animation when it reaches the pin?

[BB-000]

+1000

Yes there is a noticeable delay in the time it takes to pin, causing elements to jump back to the pin position after it has already been scrolled halfway up the page.

Spent hours coding a complicated page with multiple pinning elements and it looks awful (unless you scroll very very slowly) :/

It's like the scroll event is being throttled? Is there a way to stop this??

I got briefly excited when I found 'refreshInterval' but it doesn't do what I initially thought...

[artildo]

Glad to see it's not my personal issue. Funny, but I used the same themplate I created before, just changed backround, JSONs, animation functions. Nothing changed that could affect scrollmagic. But in the first projects there were no jumps at all

[artildo]

I found out that in my first project there were some background styoling. When I removed it, the jumps occured. I had to return it. So I made the "gradient" with equal colors for no gradient effect in real. This saved me.

background: -moz-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); background: -webkit-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); background: linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#003d77",endColorstr="#005bae",GradientType=1); -webkit-box-shadow: 8px 0px 21px 7px rgba(0,0,0,0.16);

[sharkfin009]

Ah, good catch! So perhaps the gradient was causing repaints which where challenging the browser?

On Thu, Oct 15, 2020 at 12:49 PM artildo notifications@github.com wrote:

I found out that in my first project there were some background styoling. When I removed it, the jumps occured. I had to return it. So I made the "gradient" with equal colors for no gradient effect in real. This saved me.

background: -moz-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); background: -webkit-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); background: linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#003d77",endColorstr="#005bae",GradientType=1); -webkit-box-shadow: 8px 0px 21px 7px rgba(0,0,0,0.16);

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/janpaepke/ScrollMagic/issues/976#issuecomment-709162776, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJXI4PHSWIU432SQB6XTSTSK3HTJANCNFSM4SP2LK5Q .

[artildo]

@sharkfin009

This gradient stuff actually fixed the issue, no jumps with it. Have no idea how it works, kind of magic (scrollmagic) Without it jumping persists

Ah, good catch! So perhaps the gradient was causing repaints which where challenging the browser? … On Thu, Oct 15, 2020 at 12:49 PM artildo @.***> wrote: I found out that in my first project there were some background styoling. When I removed it, the jumps occured. I had to return it. So I made the "gradient" with equal colors for no gradient effect in real. This saved me. background: -moz-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); background: -webkit-linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); background: linear-gradient(139deg, rgba(42, 73, 142, 1) 0%, rgba(42, 73, 142, 1) 54%, rgba(42, 73, 142, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#003d77",endColorstr="#005bae",GradientType=1); -webkit-box-shadow: 8px 0px 21px 7px rgba(0,0,0,0.16); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#976 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJXI4PHSWIU432SQB6XTSTSK3HTJANCNFSM4SP2LK5Q .

[cytronn]

+1000

Yes there is a noticeable delay in the time it takes to pin, causing elements to jump back to the pin position after it has already been scrolled halfway up the page.

Spent hours coding a complicated page with multiple pinning elements and it looks awful (unless you scroll very very slowly) :/

It's like the scroll event is being throttled? Is there a way to stop this??

I got briefly excited when I found 'refreshInterval' but it doesn't do what I initially thought...

Did you find a way to make your project work smoothly?

[BB-000]

@cytronn The new GSAP Scroll Trigger plugin is awesome.

Check out the 'anticipatePin' property in the docs here

"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."

[BB-000]

@cytronn But no, I could not get my page to be smooth using ScrollMagic 😢

[cytronn]

So you rebuilt it with scrolltrigger, is that right?