“Draggable”, Animated Carousel

The Carousel will be included in the next pattern library update, but until then, this is what it will look like:

Try it Out OR Download the Axure (.rp) file

There is another release of the library in the works, in which I’ve basically gone off the deep end with some sweet interactions.  However, I’ll wait until a few more pieces click together before I post it, including some additions from other designers.

How it’s Made

This Carousel uses a couple of tricky techniques that are confusing at first, but useful once learned.  Here are the fundamentals:

1. Windowing
   To create the movable filmstrip of items, place one dynamic panel that will be your “window”, which shows only a few items at a time.  Inside that dynamic panel, place another, much wider dynamic panel that has all your items nicely lined up and spaced out evenly.  Then, all you have to do is move the inner dynamic panel around using interactions.

2. Animation (with Momentum)
   Victor at Axure has explained how to do time-delayed interactions, and I won’t repeat that.  However, momentum hasn’t been discussed.  To create momentum, move your panel by a decreasing amount each time.  Your cases should look something like this, which will create the appearance of slowing down:

   Case 1: Move (panel) by 50px
   Case 2: Wait 50ms and Move (panel) by 40px
   Case 3: Wait 100ms and Move (panel) by 30px
   Case 4: Wait 150ms and Move (panel) by 20px
   Case 5: Wait 200ms and Move (panel) by 10px

3. Fake Click-and-Drag
   To do this, first, lay an image map region over the “window” panel.  Then create a hidden “Controls” dynamic panel on top of the image map, which will have controls inside that move the inner, “filmstrip” panel around.  Set the onClick interaction on the image map region to show the “Controls” panel.
   So, when the user clicks the image map, “Controls” will appear between the mouse pointer and the image map they just clicked.
   Now open up the Controls panel, and within it create two more image maps, one on each side.  Use the MouseOver interaction on each of these image maps to 1) animate the “filmstrip” in its respective direction, and 2) re-hide the Controls panel.
   Finally, in the middle of the Controls panel, place some helpful text and arrows telling the user to slide their mouse in either direction.
   Here is an exploded view:
   

Whew.  Did you make it through all that?  You deserve a bonus (it’s included in the .rp file, too).

Happy prototyping!