I’m trying to add a dropshadow to the navbar on scroll. From other community posts I figured out I need to create another navbar, place it behind the existing navbar, and add a ‘show/hide’ animation to only show it on scroll down (and hide on scroll up). I did all that, and when I click preview in the animation part it works as intended, but when I try to see it working in website preview mode it doesn’t do anything on scroll. New to animations so potentially doing something wrong.
There’s two small problems going on that we should be able to get fixed up.
If you take a look at your block (Sticky Nav Shad), you have a container in it, but the container and everything above it is based on the size of what’s inside of it. When you’re in the designer, it auto-fills empty elements with auto size with a bit of “empty space” so you can see it on the page - once you look at the preview or publish though, the element disappears because it doesn’t actually have any size.
You can fix this two ways, either copy everything inside your other nav container (the guts ) and make their “opacity” zero.
Alternatively, you could set a fixed height for both navbars.
If you look at your scroll interactions, click on “Nav shadow hide”. You’ve set an interaction but didn’t select an element for it. Just select the “Sticky Nav Shadow”, set the same interaction, and delete the empty.
As long as I remembered what I did, you should be good - or if I forgot something, let me know and I’ll go back over it again…
¯_(ツ)_/¯
Unfortunately still not working — I did what you said and copied and made opaque, but the only option I have when I select the element and choose the animation is this:
It only lets me choose ‘selected element’ and for some reason that’s not working, even when I click preview or play.
Any ideas? Maybe I’m looking in the wrong place? These animations are just really confusing to me. If you wouldn’t mind recording a quick gif or screenshot I could see where you’re looking.
) and make their “opacity” zero.
- or if I forgot something, let me know and I’ll go back over it again…