Hide Navbar YouTube Tutorial issues

Plasmic Studio Questions
1

I’ve been trying to follow this tutorial from Plasmic to do something that would take me 10 min in Webflow, Framer, or 20 min to code myself in React JS. I’ve been trying to accomplish this for 5 days and still can’t get anything working. I’ve followed it exactly and pasted code from the GitHub, couple takeaways so far:

  1. I can’t get the ‘scroll provider’ to show up in the project settings as in the video
  2. The video isn’t a good tutorial, because it doesn’t detail the recommended process for pushing the code to Plasmic, but I THINK I have it figured out - still, would be nice to be a little more thoughtful about your tutorials
  3. After committing the code for this, despite the fact that it doesn’t work or help me in any way, I am unable to select any of the objects in my artboards without getting a weird, ambiguous error telling me it can’t recognize the component in the DOM (even if I’m not selecting a component)

SUMMARY: Something like hiding the NavBar on scroll should be incredibly simple, and should be accomplished without code in a platform using the term ‘no code.’ It’s a simple transition, and can be done easily in any Plasmic competitor without having to write components by hand. Is this really how Plasmic works? Because if it is, I fail to see the benefit over just building my site purely in code, which would be easier for me because it’s super glitchy trying to push code back-and-forth, I can’t seem to find a good way to get a live preview (which is a cinch if I’m working with raw code), etc.?? Is there really no way to use transitions/transform and the ‘on scroll’ function to acheive this without code?

2

I had the same question about the scroll event and nobody helped me further, so it seems the only way is through code. I’m not using a codebase to not overcomplicate my project, but I had to use the HTML Component and vanilla JS to achieve the hiding of another component.

I couldn’t find another way and I recommend you to do the same: use the window.addEventListener to attach the scroll event and with an ID in the NavBar hide it in a scrolling.

3

Hey, sorry for the delay. This tutorial is old and he hope to update it soon, but the currently is a way to to this only through Plasmic, with just a tiny bit of code and using our Side Effect component.

Here is a video example:

1 Like