The navbar interaction in "Scroll into view" is not working


I’m trying to make two interactions with the navbar:

  1. It disappears when scrolling down the page and appears when scrolling up;
  2. Its background turns transparent when it is on the top of the page and opaque when it is on other parts.

I succeed in 3 of the 4 tasks. The item 1 is working. The problem remains at item 2, which is partially working. It starts with the transparent background and turns into opaque when out of the top. But once it comes back to the top, it’s background doesn’t turn transparent again, as can be seen in the link below.

Here’s how I made it: I created a top section (static) and placed the navbar inside it. So I added the “Scroll to view” trigger to the top section and created two animations, one for the scrolled into view and another for the scrolled out of view.

Hope someone can help me. Thanks.

[1] Link of the website:
[2] Read-only link (in which the navbar shows a different behavior)

Hey @DEEP_Comunicacao!

  1. Remove loop and remove offset:

  2. On nav-bg-transparent duplicate your inital value so that when it is called in the future it resets from opaque to transparent:

Have a great day,