Trigger nav menu animation

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

If you open it normally via and then scroll, the animation which turns the header black works well.

But if instead you open the anchor link 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.

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

Here’s a demo I created

Landing page:

Specific section:

Here’s an open link

I hope this helps.


Absolutely awesome @Eli11
Thanks so much!!

1 Like