Scroll to simulate panel content collapse

Alexandre Colin shared this problem 6 months ago


(See attached file) I have a timeline (green line) with steps (circles in green), and messages (blue, orange).

When scroll down, I want to compress the timeline to the bottom and bring green circles close to each other. When the circles are getting close, the messages (blue & orange) contained between to green circles are compressed to save space while letting the user know there is something to look at.

When scroll up, the green dots are streteched to the top and compressed message are expanded while scrolling up.

This timeline is in the middle of my prototype among other panel, menu.

I don't find how to to do it. The "on scroll" event does not really works, unless i put my panel above the top and below the bottom of the screen. I don't want such dynamic panel as it is supposed to be a widget in the middle of my prototype.

Prototype web and not mobile.

Any tips on this ?

Thank you !