Timeline navigation


#1

Hi,
Firstly, I am new to axure. I am trying to make a timeline navigation through custom scroll.
Please see the image below:

I want the tiles on the left move fast as I move the verticle scroll from top to bottom. I know how to make a custom scoll but I do not know how to make it functional. What I mean is, as I drag the bar on the right, the dinamic panel containing the tiles should scroll.

Can someone help me or direct me to a tutorial, because I could not find any.

RP file here:
timeline_navigation.rp (113.1 KB)

–UPDATE–

I have figured out how to do this to some extend. The problem is that the tiles scroll up on both upward and downward movement of the scrool bar.


#2

Are you able to share your file so we can help you troubleshoot the interaction?


#3

Yes, I have added the PR file in the initial post. Thanks.


#4

@kaustav88, I updated your file with a few ways you could fix this.

timeline_navigation.rp (330.1 KB)

  • Home (1) is a quick fix to move the timeline panel in the opposite direction of the scrollbar. The only thing I did was to add [[-DragY]] to the action of “move timeline” and set a bottom boundary so the scrollbar wouldn’t run off the end of the line. This works, but you end up with extra space on the scrollbar line, so the scrollbar still drags but there is no more movement in the timeline. There are a few ways to handle this. You can calculate a fraction of the scrollbar’s movement so that the timeline moves slower than the scrollbar, or you can increase the scrollbar’s height to indicate the relative height of the timeline panel to the timeline container. This is very common in web browsers and scrolling window containers.

  • Home (2) is an attempt at moving the timeline at a fractional pace. Works pretty well, until the timeline grows. I noticed you could expand some of the items, pushing the widgets below them. I set the timeline panel to “Fit to Content” so that it stretched with the content. This kind of breaks the “fractional pace”, but perhaps my math could be improved.

  • Home (3) attempts to use the more common “expanding scrollbar” approach with pretty good results. The size of the “scrollbar” rectangle widget (in your “drag_handel” panel) gets set with the “timeline” dynamic panel’s OnLoad and OnResize events. The algorithm basically calculates the difference in the height of the timeline panel and the height of the timeline container such that the longer the timeline content, the shorter the height of the scrollbar handle. This in turn allows for more scrolling distance to show that extra content. When the timeline content expands or contracts, the scrollbar handle shrinks and grows accordingly so that the timeline content still scrolls smoothly and stops at the top and bottom appropriately when the scrollbar runs out of space. For good measure, I center your “date” widget to the scrollbar handle when it changes height.


#5

Thanks @mbc66. As I said, I am new to axure, so I am currently going though the prototype file and checking the conditions and math you did. This might take some time for me to process. I might come back with some questions. BTW, the third option is exactly what I am looking for.
Thanks again.


#6

Just the best, as always. Thank you.