Streaming live at 10am (PST)

Trigger nav menu animation

Hey guys,
I have the following problem on our landing pages:

If you open it normally via https://www.panther.tv/p/roller-plate and then scroll, the animation which turns the header black works well.

But if instead you open the anchor link https://www.panther.tv/p/roller-plate#small the animation never gets triggered.

It’s triggered by a div (located below the header) leaving the viewport, which of course doesn’t happen in the second case.

How would you solve this? I don’t find the appropriate trigger, to launch this animation otherwise. How is this solved anyway? Is my approach wrong in general?

Looking forward to a small clue :wink: thanks!


That’s a problem with scroll triggered IX, and there’s no easy solution for it. It doesn’t only happen when you end up on the page with a link to a section, but more often with a simple “back” in the browser, where the page is reloaded at its previous state, hence the IX never being triggered.

Okay, so far so good :wink:
Is there maybe a snippet of custom code to trigger the animation?

Here’s a good solution with one simple interaction.
Create a Page trigger - While page is scrolling
Set the nav background color based on percentage scrolled in page.
Done!

This will solve the issue when opening a url link with a specific section.

Here’s a demo I created

Landing page:
https://nav-bg-color.webflow.io/

Specific section:
https://nav-bg-color.webflow.io/#Section-3

Here’s an open link
https://preview.webflow.com/preview/nav-bg-color?utm_medium=preview_link&utm_source=dashboard&utm_content=nav-bg-color&preview=bd3e35c9a5d6341189c25de3b76a1a0b&mode=preview

I hope this helps.

2 Likes

Absolutely awesome @Eli11
Thanks so much!!

1 Like