I'm trying to create prototype for a desktop landing page where a relative vertical scroll relationship between an image and a text box is maintained at the same time as a page-wide vertical relationship is also maintained. I am essentially trying to mimic vertically scrolling on a page where a text and image pair crawl into the screen according to the user's scroll input AS well as having the image and text pair crawl at different speeds and also briefly stick together.

A more detailed description is in the attached image => Diagram of Intended Scroll

Does anyone have any idea of how to do this in Figma? I'm not sure if it is even possible in Figma with its prototyping features. If it isn't, can anyone tell me what UI prototyping.

I've tried using component prototype functions. But I am honestly stumped.

I'm trying to create prototype for a desktop landing page where a relative vertical scroll relationship between an image and a text box is maintained at the same time as a page-wide vertical relationship is also maintained. I am essentially trying to mimic vertically scrolling on a page where a text and image pair crawl into the screen according to the user's scroll input AS well as having the image and text pair crawl at different speeds and also briefly stick together.

A more detailed description is in the attached image => Diagram of Intended Scroll

Does anyone have any idea of how to do this in Figma? I'm not sure if it is even possible in Figma with its prototyping features. If it isn't, can anyone tell me what UI prototyping.

I've tried using component prototype functions. But I am honestly stumped.

• scroll
• prototype
• vertical-scrolling
• figma

Share Improve this question Follow asked Nov 20, 2024 at 0:22 Giuliana Wladessa MancaGiuliana Wladessa Manca 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I believe you can achieve this by using transitions between frames, with the Smart Animate mode.

Instead of having one tall frame, you'll need several frames with a smaller height:

Notice, in the layers panel, that the green rectangle is already present on Frame 1. It is invisible because it has been moved "out" of the frame even though it is inside. This is important because Smart Animate will take the position of Green Rect from 1 to 2 and make it move on that specific path.

Let me know if this helps and if you need more help. Good luck!