Hi all! I am trying to make a div visible once the navbar has been scrolled out of view. Currently that div(section) is directly below the navbar section hidden from view. I’d like the visibility to change based on the number of pixels scrolled down. All the docs have been great but cant figure this one out. Thanks in advance!
Hello Matthew,
I have selected container 34.
Added trigger While scrolling into view
Play scroll animation
Add a new one
Then in scroll actions
Select container 34
Add at 0% - Opacity 0%
Add at 100% - Opacity 100%
Now click on live preview and you will see a green pointer at where on the page you are.
either add a new opacity at that point or move the start to match.
You will need to play around a bit to get it right.
Hey @iDATUS , thank you for the solution, it worked as expected. Unfortunately, when you set the opacity to 0% the section still exists on the page see section 15 in photo. I was hoping to have the section display set to none until a certain point and then have it set to flex when the navbar scrolled out of view. Any thoughts on how to do that? Thanks again I appreciate the help.
Ahh its section 15 now. that’s better.
I see your still working on it, let me know if you want help after you finished experimenting.
Also this video may help
@iDATUS thanks again! What I am trying to accomplish is in the initial state to have section 15 visibility set to none and then when section 15 reaches the top of the viewport change visibility back to visible so section 15 becomes sticky to the top of the viewport. I have the section as sticky at top 0 but still unsure about the visible/non issue.
I was thinking about this as my head was hitting the pillow last night.
Couldn’t you put it underneath the navbar?
So when the navbar scrolls off you see it.
No need for interaction.
Let me know what you think and if you want more help.
Hey @iDATUS I finally figured it out thanks for the nudge in the right direction.
What I have done to achieve the display = none affect was to create an interaction while scrolling that set the size of the section to 0px then to 100%. I also had to set an interaction for the contents inside the section that went from 0 opacity to 100%. It was a pain but I have a better understanding now. Thanks again!
Brill you got something you can work with and for feeding back.
Does look very good but I think you can do even better.
Fade/scroll the menu out to show the modal underneath.
Leave as if your happy but if you have a go and get stuck come back to us.
Yes it was meant for your good self.
I was going on you original request and trying to see if we could push your solution further to achieve it.
Knowing a lot more of what your original goal was, in my opinion I would try again, but time is valuable, and if its not really desirable any more then carry on creating.
