Skip to main content

"On Scroll" for prototyping


Show first post

Torunn_Skrogstad

+1 let’s do it!


misako.watanabe

This functionality is needed.


Luiz_Casemiro

+1 on this! would be really helpful


Olympias_Freundlich

+1 Would be great!


Timo3
  • December 13, 2022

I would also really like to see this, please — have to switch to do this in Jitter to be able to hand over and can’t test it in usability testing!


Andres_Sanz

Could the scroll event have an interaction like this?

  1. I select a frame and take the link to another frame. I make sure the distance of the element I want to keep on the ceiling, in this case I’m trying to make a sticky menu.

  1. I deploy the event selector and choose the new scroll event:

  1. I select the scroll event:

  1. I specify the event at which pixel of the total height I want the event to be triggered:


SYED_IMAM

I cannot see that option. Can you please guide how to get the scroll option?


dennsi
  • Active Member
  • January 3, 2023

It probably was a concept / proposal what @Andres_Sanz posted.
This is not implemented yet as far as I’m aware of.


Andres_Sanz

It’s an idea I’ve proposed, it’s not implemented nor are there any warnings that it will.
I’m honoured that my prototype confused you, that means it’s good enough to look like part of the app hahaha 🙂


Mihai
  • New Member
  • January 8, 2023

+1 This feature would be very useful for prototyping!


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
  • January 18, 2023

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.)

  1. I created a white rectangle that spanned the width of the screen.
  2. I moved it do the scroll depth I wanted to trigger the event.
  3. I selected the rectangle and used the “Mouse enter” interaction to trigger the next frame.
  4. 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
  • New Member
  • February 7, 2023

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


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.


+1 Need this feature badly. On Drag just can’t handle the detailed interaction desired. Thank you!


logovka
  • 1 reply
  • March 7, 2023

This is so needed! Please add the scrolling interaction feature!


2 years!!! We want this sooo badly, hear us Figma, please.


Troy_Halliday

Maybe we will get it when Adobe finishes buying the software out. 🙄


Blandine_PELAT

Can you explain me how to do the hover hack? I didn’t success. Thanks


Blandine_PELAT

It’s exactly what I want to do, but I don’t know why it doesn’t work for me…


Viktors

Oh, my god, is it finally available? I can not stop to thank you, Figma developers and team!

Figma

Thank you, thank you, thank you! Wow, I am so excited!!!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings