"On Scroll" for prototyping

konst · 2021-02-01T12:00:54+00:00

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?

361 replies
79624 views

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?

Share an idea

Show previous replies

Yichen_Huang

+100000
Please! Will have to switch tools if it’s still missing.

scrolling prototype

Hmm, this thread speaks volumes over the years. So Figma devs. Are you not able to add “on scroll” because your superiors have an evil agenda? We your users will stand with you if you revolt. Can amazon you pitch forks if needed…

A

Anne17

Yes please! This is a prototyping essential 🙏

Alex_Wright

Throwing in my name to the feature request hat. It would be extraordinarily beneficial for prototyping to executives and stakeholders. Thank you for your consideration, Figma.

Niklas_Larsson

+1 from me, realized I need this when trying to create a sticky header that gets a subtle dropshadow when scrolling.

ImCarlo

New Member

+1
We need this feature!

MattFannin

New Participant

I came up with a workaround for On Scroll triggers while we wait for a native feature.

Pre-warning, this is very much a hack and involves a reasonable bit of setup — but it actually works surprisingly well! Basically it combines ideas from Double Glitch’s insane cursor tracking hack along with an older technique for faking sticky headers before Figma had that feature.

I’ve found it pretty helpful already for demonstrating the occasional precise interaction where you need something to appear at a certain scroll position (like a floating header appearing after scrolling a certain way down the page etc).

Here’s a prototype file with some explanation, and an article I wrote about how it all works 🙂 — hopefully useful to someone!

85ef593493dd79cc639133cb920c1d7240e505e0.zip