Re-size image on scroll


I’m building a prototype where I would like to resize an image on scroll, so it dynamically grows bigger/smaller depending on the scroll. The image will show a video stream (only a still picture in the prototype), that on top of the page shows full size but then gets smaller as the user scrolls down and pins in the top right corner.

When scrolling up to the top the picture gets bigger again.

Is this possible, does anyone have any advice or examples on how to do it? I’ve googled and looked through the forums, and found some similar examples but nothing I’ve gotten to work.

Many thanks

Hi, Liza,

The problem is that when you scroll a page there is no way to understand how much exactly you have scrolled. (or at least I don’t know how). It is not a problem if you don’t need to tie size of the image to the current position of the scrollable content.
In that case you can just use “OnScroll” events.

If you need to tie the size of the image to the current position of the scrollable content you can use “Move” actions instead, to know exactly where the content is placed, and base the image size/position changes on the “OnMove” actions.
Content in that case can be moved by “OnDrag” actions, or, if you need to make it possible to scroll content with mouse wheel, by an empty scrollable overlay above it.

I have mockup with some similar behavior – you can check how it’s done: scroll_zoom.rp (3.5 MB)