Thank you so much! I am attempting to create a monthly calendar that can horizontally scroll and the name of the Month will also change when the new month is visible (3/4) of it on the screen. This is a great start. The only I got the prototype to work was having each of the frames named the same.
Brilliant! Thank you so much for this clear and simply to the point explanation of this complex prototype solution. Wish you all the best and great continuation! :D
If all tutorial videos had this level of communication with topical subject matter I would have already been a millionaire years ago.. I just subscribed, thank you.
everything works fine when the navbar goes down, but when I click on any tab in the navbar the page changes, unfortunately the navbar does not change. The selected section does not appear. But when I move the cursor down the blue cursor is on the top of the next page. I guess I didn't get the fields of the sections right, what can I do about it?
I kind of figured it out. I used the "mouse up" interaction instead of "mouse enter". Sometimes it glitches on transition a bit but otherwise it works (Figma problem, not your prototype). If you preview it on desktop you have to drag with you mouse instead of scroll to get the same effect as on mobile.
Any idea how to do this in vertical nav. Scrolling and changing nav list item is working well but on click of list item on interaction scroll to there is issue of list item selection . Idk if you got my point 😅
That's what I'm trying to figure out.. it's working when I scroll with my mouse on my computer but when I test it on my phone (only touch and no mouse) the mouse enter trigger does not work ;(
This video deserves a better title. For instance, "Figma Scroll Animation", "Click to scroll animation"...... It has great content, and I hate how much digging( clickbaits) it took to find this. Thank you for the awesome video nontheless! @mavidesign
I wondered if you can set this up with some conditional logic relative to the prototype scroll state in variables.. Looks like this is the easiest way.
Is it possible to have a navigation that changes on scroll say you wan the full logo on the top and as you scroll its just the logo icon? I know you can do this in Adobe Xd
Hope they add axis coordinate detection trigger. That would be a killer feature I swear.
You provided such a clear explanation that made understanding these complex conditions so effortless. Kudos!
Thank you so much! I am attempting to create a monthly calendar that can horizontally scroll and the name of the Month will also change when the new month is visible (3/4) of it on the screen. This is a great start. The only I got the prototype to work was having each of the frames named the same.
I was stuck in this process and was not able to find any solutions but this video made it very easy. Thank you so much for the amazing videos.😍😍😍
How about using a scroll variable to change the component variant? Can that be done?
Brilliant! Thank you so much for this clear and simply to the point explanation of this complex prototype solution. Wish you all the best and great continuation! :D
Amazing brother ❤ this helps me a lot
If all tutorial videos had this level of communication with topical subject matter I would have already been a millionaire years ago.. I just subscribed, thank you.
So true, bro😂
Can you make the prototype with updated Prototype option. Would be superhelpful.
Thank you so much man, it really helped me a lot
everything works fine when the navbar goes down, but when I click on any tab in the navbar the page changes, unfortunately the navbar does not change. The selected section does not appear. But when I move the cursor down the blue cursor is on the top of the next page. I guess I didn't get the fields of the sections right, what can I do about it?
Can you have this same interaction on mobile?
Yes
I kind of figured it out. I used the "mouse up" interaction instead of "mouse enter". Sometimes it glitches on transition a bit but otherwise it works (Figma problem, not your prototype). If you preview it on desktop you have to drag with you mouse instead of scroll to get the same effect as on mobile.
Nice tutorial, mate. Have you figured out how to change the navbar properties such as top/bottom padding, just like airbnb for example?
Great idea but Figma is absurd that we need to take that much effort to recreate a simple animation.
Great video, it was very helpful.
Any idea how to do this in vertical nav. Scrolling and changing nav list item is working well but on click of list item on interaction scroll to there is issue of list item selection . Idk if you got my point 😅
Thank you for the video.
That's interesting but is forming to create different pages. What about a complex project with many pages?
Can we do this for mobile design?
That's what I'm trying to figure out.. it's working when I scroll with my mouse on my computer but when I test it on my phone (only touch and no mouse) the mouse enter trigger does not work ;(
This video deserves a better title. For instance, "Figma Scroll Animation", "Click to scroll animation"...... It has great content, and I hate how much digging( clickbaits) it took to find this. Thank you for the awesome video nontheless! @mavidesign
I've tried doing this but couldn't figure it out. Thanks for the vid
Your video is amazing, its so helpful... but you should improve your audio quality
I wondered if you can set this up with some conditional logic relative to the prototype scroll state in variables.. Looks like this is the easiest way.
Awesome, Just I needed!
Thank you for sharing
can we do the same thing in Elementor...please help
Is it possible to have a navigation that changes on scroll say you wan the full logo on the top and as you scroll its just the logo icon? I know you can do this in Adobe Xd
The smart idea would be protopie figma plugin ,I think so
Love these videos!! Keep it up
Well done. but wish there was no tradeoff
But line in nav bar doesn't change after click
7:17 the solution begins
Why is my version just flashing? I copied exactly your instructions...
Same did you figured out what is problem ?
@@Hygge2921 your layers are probably not named properly. they have to have the same name and also the same layer order
@@chiyonie hey thanks i fixed it
@@Hygge2921 ohh glad to hear that!!!
@@chiyonie Thank you!
Why is this so painful!? It's been part of the web for over a decade.
com'on Figma, stop wasting time on UI updates and build in basic proto scroll position do x functionality.
рабочий костыль ... простите уж
Figma really sucks 🤣🤣 I switched to Framer for a while.