Best practice for 7.1 header shrink transition delay

Wondering if anyone, perhaps the ever helpful @tuanphan has a rock solid, best practice for customizing the transition-delay for the sticky header in 7.1 on shrink?

For the homepage only, I'd like to delay the transition for the .shrink class for this site such that the header doesn't show it's background (which is invoked upon shrink) until the site is scrolled past the point at which the centered logo "How God Works" isn't viewable anymore in that first section:

https://how-god-works.squarespace.com/

Pwd: Letmein

I'm guessing it may involve more than custom CSS (some sort of javascript) since the depth of scroll will be different at different view heights?

The code I've tried, but hasn't seemed to have any effect thus far is:

.homepage .header .header-announcement-bar-wrapper {
  transition-delay: 8s !important;
}

.homepage .header.shrink .header-announcement-bar-wrapper {
  transition-duration: 4s !important;
}

I've already tried searching for answers and have found some that are close, but nothing definitive about how to consistently delay the header transition and nothing about what I'd like to do specifically.

Thanks in advance for any advice/answers,

Marty

Addendum: For now I've simply hidden the "How God Works..." graphic on scroll with a bit of jQuery, but I'm still very interested in how to delay the .shrink transition.

This will require JavaScript code. Do you use Personal or Business Plan?

Hi @tuanphan the site is using business plan, hence I'm able to use jQuery for the solution I described - hiding the graphic on scroll, which actually works fine, but I'd still be interested in how to customize the header transition.

Thanks!

I'm also looking for some assistance with this functionality!

On 2/10/2023 at 9:54 PM, tuanphan said:

This will require JavaScript code. Do you use Personal or Business Plan?

Hi @tuanphan, just curious if you've got any ideas 🙂

I would also like to know how to resolve this. Thanks in advance!

On 5/9/2023 at 10:46 PM, mbockmaster said:

Hi @tuanphan, just curious if you've got any ideas 🙂

If you share link to your site, we can check easier

Hello @tuanphan! Thank you!

https://andasanas.com/home-new

On 5/13/2023 at 12:14 AM, mbockmaster said:

Hello @tuanphan! Thank you!

https://andasanas.com/home-new

 

 

What is access password?

Oops!

pw: 140ann 

On 5/15/2023 at 8:57 PM, mbockmaster said:

Oops!

pw: 140ann 

add transition delay for logo, or for background color change?

hi @tuanphan, I'm hoping to slow the transition of everything (the padding, logo, background colour).

Hi @tuanphan, with lots of trial and error I've gotten a little closer! I've made a video to help describe a bit more in detail what I'm struggling with: https://watch.screencastify.com/v/xVF50eeJufdeEA9ajirt

The site is: https://fife-sunflower-68mk.squarespace.com/

pw: elipsis

Thank you so much!