Lazy Susan

The default movement of a Roundabout. This shape is included with the Roundabout plugin, but can be specified like any other shape.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'lazySusan'
      });
   });
</script>

Water Wheel

A vertical version of the Lazy Susan shape.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'waterWheel'
      });
   });
</script>

Figure 8

Items travel in a horizontal figure-8.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'figure8'
      });
   });
</script>

Square

Items move in a flat, square shape.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'square'
      });
   });
</script>

Conveyor Belt (Left)

Items travel in a conveyor-belt angled towards the left.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltLeft'
      });
   });
</script>

Conveyor Belt (Right)

Items travel in a conveyor-belt angled towards the right.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltRight'
      });
   });
</script>

Diagonal Ring (Left)

Similar to the Lazy Susan, but the left side is tilted up.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingLeft'
      });
   });
</script>

Diagonal Ring (Right)

Similar to the Lazy Susan, but the right side is tilted up.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingRight'
      });
   });
</script>

Roller Coaster Added in v1.1

Wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!

Because this one can be kind of weird if you have just the right number of elements in your Roundabout, changing the tilt increases the number of waves in the coaster.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'rollerCoaster'
      });
   });
</script>

Tear Drop Added in v1.1

The front side is pointy, but the back side is rounded. Changing the tilt with this shape makes a spiral pattern (although the part that you probably want in front is in the back).

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'tearDrop'
      });
   });
</script>

More Shapes, More Fun than Useful

The Juggler

Sort of a helix-type path.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'theJuggler'
      });
   });
</script>

Goodbye Cruel World

Towards the end of an animation that will put a moving item into focus, the item drops sharply off the screen. (Or, will jump quickly out of no where, depending on which direction you move.)

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'goodbyeCruelWorld'
      });
   });
</script>

Further Customization

Playing with the tilt of your Roundabouts while using these shapes may result in even better shapes for your site. Give it a whirl!