Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slight jump when pinning #976

Open
artildo opened this issue Oct 13, 2020 · 9 comments
Open

Slight jump when pinning #976

artildo opened this issue Oct 13, 2020 · 9 comments

Comments

@artildo
Copy link

artildo commented Oct 13, 2020

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
Copy link

BB-000 commented Oct 14, 2020

+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
Copy link
Author

artildo commented Oct 14, 2020

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
Copy link
Author

artildo commented Oct 15, 2020

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
Copy link

sharkfin009 commented Oct 15, 2020 via email

@artildo
Copy link
Author

artildo commented Oct 15, 2020

@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
Copy link

cytronn commented Feb 16, 2021

+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
Copy link

BB-000 commented Feb 16, 2021

@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
Copy link

BB-000 commented Feb 16, 2021

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

@cytronn
Copy link

cytronn commented Feb 16, 2021

So you rebuilt it with scrolltrigger, is that right?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants