"On Scroll" for prototyping

Share an idea
1

  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?

174 Likes
2

Need on scrolling interaction, up and down instead of drag on #prototyping, so i can present the exact micro interaction for show and hide top navigation bar between each card on onboarding screen or like search input while i scroll the page down on iphone native app, vice versa.

25 Likes
3

I’m considering doing the prototype somewhere else just because of this missing.

42 Likes
4

We reaaaaallllllly need this. Badly. Please!

29 Likes
5

i also need this badly for switching nav panels upon a certain scroll position. definitely need scrolling interactions. best by definable scroll positions (if a frame enters and exits the viewport)

12 Likes
6

+1. Another use case for me would be to show a sticky button or pull the header back on scroll.

I would also add that interactions such as scroll to view, ie when scrolling something into view, it animates. Like when you get to a section and you want the section to animate in a way when user get to it, once.

6 Likes
7

It will be awesome to have this feature.

2 Likes
8

Working on a prototype right now and would love this feature. To take it further, I’d like to be able to show a UI element based on scroll position.

10 Likes
10

Dog-piling here, but I would agree “on scroll” interactivity would be very valuable. I have many instances where being able to have scroll control would drastically improve my prototype. Are there any plans for this coming in future releases?

6 Likes
11

When creating an interactive component I would really like to have the option to choose “On scroll” as a trigger and be able to decide after how many pixels it should be triggered.

For example:
If I have a fixed close button in my prototype. After I’ve scrolled let’s say 80px I want it to change to another variant of itself that has box-shadows.

Often I want to make fixed objects pop more after the scrolling has begun, but not from the start. So this would be a really neat feature.

4 Likes
12

Definitely need entrance animations. It’s one of the major downfalls of prototyping in Figma and is always a hassle trying to explain to developers how you want things to animate in on scroll.

4 Likes
13

We really really really, need “OnScroll” Events with all the options that one would expect. This would greatly enhance our ability to design for the web and mobile devices. After On Touch or On Click this would likely be the most frequently used event. Thanks!

4 Likes
14

Really need this feature within prototyping!!!

1 Like
15

For desktop applications, I’ve used invisible shapes and the “on mouse enter” interaction to trigger make panels sticky. It’s not perfect, but it works alight.

3 Likes
16

+1! Using ‘on mouse enter’ sort of allows you to change views when the user scrolls (tutorial here), but it’s only for desktop. I’m testing my app prototype on an actual phone using Figma Mirror, meaning there are no mouse events! So I would really love an “on scroll” interaction (or maybe “on leave/enter viewport”) to e.g. hide the navbar when the user scrolls down.

11 Likes
17

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 Like
18

+1 for scroll events

4 Likes
19

Yeah, this Update would be awesome!

3 Likes
20

+1 Keeping this thread alive

5 Likes
21

+1 :tada:

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.
13 Likes