Skip to main content

As written in the documentation (Prototype interactions and animations) the destination of a Scroll to action can only be an element of the same top-level frame. But with this limitation it is impossible to prototype a common navigation pattern.


On one-pagers there are often floating menu for intrapage links. E.g you have an hamburger icon that opens a menu overlay from where you can scroll to a specific page section. This can’t be realized with an Figma overlay because of the restrictions mentioned above.


There is a workaround, but it seems that it only works because of a bug: You can set the menu overlay as an child of the top-level frame of the one-pager, define the Scroll-to actions and then move the menu outside the frame (as an separate top-level layer) to show it later as an overlay. By doing this all the Scroll-to actions still work, but when you change an action the target will be rested and the navigation is broken.


Working Example


Maybe you can remove the restrictions that the destination of a Scroll-to action have to be on the same top-level frame for frames that are placed as an overlay.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Hi, is it possible to apply a "scroll to" interaction from an Overlay to a section on the main page/frame?


Let me try to explain:

So, when the user hovers over an item, a pop-up overlay should appear. On this said overlay the user should be able to click on a button and then be anchored (scrolled) down to a specific point on the same page.


When I want to add a "scroll to" interaction to the button located in the overlay the only layers available for selection are the ones of the overlay, so I cannot select a point on the main page/frame


Am I missing a step or does this not exist?


TL;DR: How to apply an anchor interaction from an Overlay

I also want to be able to do this! But, because the overlay is its own frame, I don’t think I can.

Thank for the post.


Unfortunately, it is unavailable at the moment. As the article says, If you add Scroll to using the Interactions section of the Prototyping panel, you can only pick direct children of scrollable frames. To pick any object within the top-level frame, drag out a noodle and link it to the object you want to set as the destination.


There is an existing feature request thread, so let me merge into it.




Thanks!

Toku

Reply


Terms & ConditionsCookie settings