Header Animation Is Choppy

[eartheracademy]

Hello.

This is a continuation of this thread: Broken Header with One Of The Latest Updates

I went ahead and did a brand new header but it seems the animation when you scroll down is very choppy and not smooth.

There are 3 bars and the top one hides on scroll but the other 2 are sticky.

However, they seem to do a movement that I really don’t prefer especially as it is not smooth.

Can you please advise?

Thank you so much!

[tristup]

Hi @eartheracademy,

Thanks for reaching out.
I have checked your website and found that the Header jerked sometime. If that is what you are trying to point out, there might be some different reasons behind your issue. I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1. Theme Related Issue
2. Plugin Conflict
3. Theme Update related issue
4. Child Theme Related issue
5. CSS/JS Customization
6. Disabling Cache
7. Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– FTP/CPanel credentials to access the files.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[eartheracademy]

Hi @tristup

Thanks for your message.

I sat up a dev site and went through all the steps you provided, and the issue was still there.

So, I started working with the header and I finally put the transition time to zero (0) which seem to have worked better.

However, there is still a small “bump” when you scroll back up. It happens just when you hit the pixel that makes the transition, which makes the whole movement not very smooth.

I should also mention when I set a bar to shrink, it also gives me some “bumps”.

Can you please look again and let me know what you think?

Thank you so much!

[tristup]

Hi @eartheracademy,

In that case, you can try adjusting the Trigger Offset value under the Sticky option, and let us know how that works for you.

Thanks

[eartheracademy]

Hi @tristup

Thank you for your message, unfortunately none of this work - No matter what I do this header comes out choppy.

Upon scroll the bars do not transition properly and it is not smooth.

Can you please advise?

Thank you.

[charlie]

I think you can go a couple of routes here. If your set on shrinking, I’d remove the transitions on the icons as well like you have done with the bar. That’ll fix some of the jumping. Or removing the shrink looked pretty good when I played with it on your site. Let me know if that helps and have a great day!

[eartheracademy]

Hi @charlie

Thank you for your message, and I will leave it to non-shrink.

I do however still see a 1 pixel jump when sticky engages upon scroll, but it is manageable.

Is there really no perfect solution to this?

Thank you so much

[tristup]

Hi @eartheracademy,

Unfortunately, there is no alternative solution available right now.

Thanks

[eartheracademy]

Hi @tristup

Ok, thank you.

Could you maybe add this issue to be looked at for future theme releases?

Thank you

[charlie]

Absolutely we’ll take a look at smoother sticky bars in cases like this. Thanks and have a great day!

[eartheracademy]

Thank you very much @charlie

[ruenel]

You are most welcome.