Hi folks:
I’m just grokking interactions, and I think I got it! And then something like this happens.
On my home page, click on the mark on the nav bar that appears on scroll. Menu appears! Cool! Now, try to do it again.
primerstori.es
This is driving me insane.
All the more galling, the other interactions on that element, (the flip, etc) work fine every time.
Help!!
Here is my public share link: https://preview.webflow.com/preview/primerstories?preview=712e37d800463efff1bae66d22c7b385
One interaction shows nav-int-link—opa 100%
Other interaction hides nav-int-row—opa 0%
I think your two interaction should try to show/hide the same element… in that state, it makes sense that quickly everything reaches opacity 0%… the first interaction should tell nav-int-row to opa 100 again… or the other way around.
Also: waow, cool site, nice layouts, nice pages, beautiful things.
DUDE. This is awesome…
Thanks guys!
@vincent – Thanks for catching that. But it still has a curious bug.
Nav drops down, clicking on mark reveal menu, click on close icon reveals mark and hides menu. But then clicking on it again makes it go home, and does not reveal menu again. Huh?
Opacity is not enough to build solid interactions. Once opacity has finished animating, add a step to properly hide the element, add a display:none. Then also add a first step to the reverse anim, display block.
The bug you’re witnessing is actually you clicking on the invisible, 100% transparent Home button. So it’s all acting as expected.
For all your revealing/hiding interactions, start with display:none, then block, then opa 0 to 100, then the reverse.
Also, your nav menu has an onLoad trigger to hide it, and that is visible when the page loads. Prefer modifying your interactions so the menu starts either transparent, display:none, or already moved up.
Vincent, you’re awesome! Thank you, totally fixed.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.