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
Panther is worldwide known for high professional cinematographic film and grip equipment such as Dollies, Cranes, Sliders, Tracks, Rigging and more.
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
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
Here’s an open link
I hope this helps.
Thanks so much!!