I need to make an fixed navbar go down/up when an second bar (before it) show/hide smoothly (using Interactions 2.0).
I am trying to use the “while scrolling into view”. This way, the navbar will go up according the second bar position. Both will look like they are “sticky” together, until the first one disappear.
NOTE: I know about the “Scroll into view” Interaction. I DON’T want to use it, because it will leave a white gap When the first bar is starting to hide.
THE PROBLEM:
I defined the following Boundaries:
Start animation (0%) when element > Is fully visible (offset 100%)
End animation (100%) when element > Is fully invisible (no offset)
If you look the Boundaries demo, it will start when the element top touch the window top, and end when the element bottom touch the window top (out of viewport)…
But it isn’t working as intended. The animation is staring on 97% and ending on 100%.
Instead of using the While Scrolling In View interaction, try using Scroll into view interaction.
It’s much more simple and brutal and perfect for the kind of trigger you’re trying to set up.
(And a BIG thank you to you because I completely overlooked the While Scrolling into View interaction and the options it offers… I saw you first image and was like “whaaat?”)
Thanks @vincent for the tip. As i said, i know about Scroll into view and i am using it, but the problem is it will leave a gap between the first and the second bar. For an small bar it can be ignored, but for an big bar it will become very ugly.
What i am trying to archive with while scrolling into view is an sticky effect. Both bars will look like stuck together until the first disappear. Then, the second will be sticky to the top until the first came back.
Any solution for this problem will be very welcome
Scroll offsets controls. Now you can precisely adjust the bounds of your scroll animations by setting offsets (both px and percent of viewport height) that determine when your animation starts.
I’m trying to solve the problem but i can’t use px bounds…
