I want to make a prototype where something changes when user scrolls content.
I want to keyboard collapse when user starts scrolling content, but it’s impossible to do with drag action. Or it feels unnatural
Or am I missing a way to do it with existing tools?
we really need to have the feature collection that elements could communicate with each other. there are so many interactive prototypes that Figma doesn’t support.
+1 for scroll events
Yeah, this Update would be awesome!
+1 Keeping this thread alive
+1 🎉
Some use cases I can think of:
- after the page is scrolled x-pixels, set this other frame as fixes (Ex: top navs that become fixed after a certain amount of scroll)
- sticky-scroll: a frame becomes sticky while the parent frame is in view and then unsticks. (ex: when scrolling thru events on a calendar the months header is sticky while scrolling thru that months events)
- on scroll, change a components variant (ex: on long content with a fixed footer, on scroll adds a dropshadow to the fixed footer)
- once the user scrolls al the way down, display a frame that was at 0%. (ex: when scrolling thru terms and conditions, once the end is reached a fixed footer with “Agree” appears)
- the above can also be used in a horizontal scroll, such as a carousel when arrows appear/disappear once end/beginning is reached.
+1 Anything would be great! Slightly building on “anything” would be control on scroll direction up/down for vertical and left/right for horizontal. 🙏
+1 this would unlock a lot of cool prototypes 🙂
Sticky headers changing their variant on scroll, sidebar filters getting stuck after a certain point, changing the background on scroll, animating content… 🙏 pretty please 🙂
Approaching a year since this was posted. Please add! The use case of mobile testing as @Yoni_Afek described is exactly what we need.
I won’t reiterate the very valid use cases others have stated here. But, the Mouse enter hack does not apply for mobile testing. Need this.
+1 we really need this
agree with what’s been said. this is needed.
+1 I’m relatively new to Figma but was looking to see if this feature exists. Guess not, considering how recent the posts to this thread are. I’m trying to animate a nav that shrinks and becomes sticky after scrolling to a certain position. Was using the “Mouse Down” interaction to trigger the animation, but it’s not an ideal solution as the prototype is buggy. I’m going to have to create a separate prototype just to show my client how this animation will work, which is kind of frustrating. Hoping the fine folks at Figma are working on adding this feature!
That is cool. Thanks for sharing!
I agree, this would be an absolute game-changer for prototyping. Commenting to keep this thread alive!
That would be great to have it!
Yes please! Badly needed
+Badly needed. I’ve tried some mouse on-hover hacks but it’s not effective.
I’ll love to have “OnScroll” actions like:
Whe scroll up
When scroll down
After "X"px Scrolled
Ho please! I realy need this scroll up and down interactions tiggers. Tired of using other tools just for that.
- 1, need this badly. Any reply from Firma yet?
Really need this! Is there a way to find out whether it is somewhere in the Figma roadmap?
Please add scroll event 🙏
Damn, we need it so so badly! 🤪
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.