Skip to main content
konst
February 1, 2021

"On Scroll" for prototyping

  • February 1, 2021
  • 361 replies
  • 78964 views
  1. I want to make a prototype where something changes when user scrolls content.

  2. I want to keyboard collapse when user starts scrolling content, but it’s impossible to do with drag action. Or it feels unnatural

  3. Or am I missing a way to do it with existing tools?

361 replies

Agni_Kaster
New Member
January 26, 2022

+1 🎉

Some use cases I can think of:

  1. 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)
  2. 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)
  3. on scroll, change a components variant (ex: on long content with a fixed footer, on scroll adds a dropshadow to the fixed footer)
  4. 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)
  5. the above can also be used in a horizontal scroll, such as a carousel when arrows appear/disappear once end/beginning is reached.
James_Lytle1
February 1, 2022

+1 Anything would be great! Slightly building on “anything” would be control on scroll direction up/down for vertical and left/right for horizontal. 🙏

Alex_Gough
February 3, 2022

+1 this would unlock a lot of cool prototypes 🙂

Slobodan_Kovacevic
February 6, 2022

Sticky headers changing their variant on scroll, sidebar filters getting stuck after a certain point, changing the background on scroll, animating content… 🙏 pretty please 🙂

IraX
Power Member
February 6, 2022

Approaching a year since this was posted. Please add! The use case of mobile testing as @Yoni_Afek described is exactly what we need.

IraX
Power Member
February 6, 2022

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.

Captain
New Member
February 14, 2022

+1 we really need this

Sonysiska_Atmadjaja
New Member
February 14, 2022

agree with what’s been said. this is needed.

Emily_Tu
February 17, 2022

+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!

Phil_Larsen
Active Member
February 19, 2022

That is cool. Thanks for sharing!