Smoothing out progress on scroll & resize

[Bakr1]

Hi all!

 

I have some problems with my simple scroll indicator component.

when I reduce the window, scrolls down and I enlarge the window the the initial value is higher.

And I don't know is this a good solution in this case (performance): gsap.ticker.add(tickHandler)

 

Sandbox: https://codesandbox.io/s/modest-golick-zb6t1?file=/src/App.js

[ZachSaucier]

Hey Bakr1 and welcome to the GreenSock forums! 

 

As much as we love helping people around here, we just don't have the resources to wade through your entire project to figure out what's going on. Please make a more minimal version of your project where only  the relevant parts to your question are included if you'd like us to take a closer look. Doing so will also likely help you in figuring out what the issue is  

[Bakr1]

54 minutes ago, ZachSaucier said:

Hey Bakr1 and welcome to the GreenSock forums! 

 

As much as we love helping people around here, we just don't have the resources to wade through your entire project to figure out what's going on. Please make a more minimal version of your project where only  the relevant parts to your question are included if you'd like us to take a closer look. Doing so will also likely help you in figuring out what the issue is  

Ok, I've just updated sandbox (now is without Gatsby and other deps).

[ZachSaucier]

1 hour ago, Bakr1 said:

I have some problems with my simple scroll indicator component.

when I reduce the window, scrolls down and I enlarge the window the the initial value is higher.

Even if I don't resize anything but just scroll up and down fairly quickly the indicator messes up. It seems you have larger logic issues than just resizing.

 

2 hours ago, Bakr1 said:

I don't know is this a good solution in this case (performance): gsap.ticker.add(tickHandler)

Using a ticker is fine, but your logic inside of it doesn't make much sense to me. I would think that the logic in the ticker would be to detect the scroll position and update the progress based on that. I don't understand why you need a proxy tween.

[Bakr1]

I've updated sandbox and removed scrollHandler, but still when I resize the window some data is bad. I have no idea why

[ZachSaucier]

Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'm happy to help.

 

For a simple scrollbar effect see this pen:

See the Pen eYpOXYO?editors=0010 by GreenSock (@GreenSock) on CodePen

[PointC]

@Bakr1 I received your private message about this project, but as @ZachSaucier mentioned, this is more of a logic problem unrelated to gsap. We also need questions to remain in the public area of the forum so the whole community can benefit from any answers/demos. 

 

If you're looking for additional assistance with the project, you could post in the Jobs and Freelance section of the forum.

https://greensock.com/forums/forum/15-jobs-freelance/

 

Thanks.