"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
79613 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

Marc_Rubli1

yess!!! Figma it has been 2 years since this request…
Also we need a “on viewport scroll” to animate on scroll interactions. For example when a box enters the screen it should play a fade-in animation. Possible with every simple website builder but not with figma. Also for Video it would be great to let it play when on screen in preview.

James_Walsh

New Participant

XD doesn’t have this, Figma doesn’t have this - some niche prototyping tools do - but why should we have to double handle our work in 2 apps?

Hopefully when/if that $20bn from adobe hits the account this is getting implemented - It always feels like the missing piece of the puzzle and almost all our clients want to see this in prototypes.

Phil_Boulter

+1 for enabling a button once Terms & Conditions have been read entirely.

Caleb_Zarth

Hey, just found a quick work around for OnScroll events (apologies if someone has already mentioned this.)

I created a white rectangle that spanned the width of the screen.
I moved it do the scroll depth I wanted to trigger the event.
I selected the rectangle and used the “Mouse enter” interaction to trigger the next frame.
I then hid the fill.

This has resulted in the interaction and behaviour I was after. Hopefully it works for some of you while we wait for Figma to create the actual OnScroll interaction 🙏

megaroeny

Active Member

I’ve been wanting this for a few years now 😅 Glad I found this post to follow. 👍

A

Annabelle

Caleb, can you share some screenshots of your work? I’m very new to Figma and need some visual guidance. 😅

Caleb_Zarth

Sure @Annabelle ! Here’s a screenshot showing the rectangle (which I have hidden the fill on) and the prototype settings which lead to the next screen onMouseEnter.

Caleb_Zarth

For additional detail (given you said you’re new to Figma) this is what the rectangle layer should look like in the ‘Design’ panel. Note I have hidden the fill, but it can still be used for the purpose of prototyping.