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:

57%20PM
Screen Shot 2019-02-21 at 4.00.57 PM.png1144Ă—1436 30 KB

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.

#7

Hey,

I tried to reconstruct this behavior in a horizontal timeline:

forForum.rp (60.2 KB)

but i’m getting a wrong behavior when reaching the borders. The content keeps moving even if my draggable widget got to its border.
The content has to move faster in order to reach its bound simultaneously with the draggable widget, but i don’t know how.

Can someone help me to get this smooth?

#8

@cstn,

Your boundaries are good. The issue is with the algorithm used to move the content (at a fraction of the drag motion, as the content is wider than the mask (Timeline Window).) You’re correct, the content needs to move a bit more with each drag pixel (a larger fraction.) The algorithm you’re using is something I came up with to move a scrollbar when that scrollbar is sized according to the difference between the content area and mask area (such that the longer the content the shorter the scrollbar.)

I took a guess at and tried this algorithm, which works pretty well–close but not perfect*:
[[ -DragX * ((TC.width - TW.width) / TW.width) ]]
…where TW points to the Timeline Window (mask area) and TC points to the Timeline Content.

*To “force perfection” I added some “adjustment cases” when the drag handle reaches its left boundary and right boundary to correct the location of the Timeline Content, nudging it all the way to the left or all the way to the right.

See Page 2 of this updated file:
forForum.rp (84.3 KB)

#9

Thank you so much! Works very smooth :clap::relieved:

closed #10

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