Vanilla JavaScript Wheel Menu – jsWheel

Category: Javascript , Menu & Navigation | March 9, 2016
Author: vikbez
Views Total: 600 views
Official Page: Go to website
Last Update: March 9, 2016
License: MIT


Vanilla JavaScript Wheel Menu – jsWheel


jsWheel.js is a pure JavaScript library for generating a 3D wheel menu that you can navigate between items with arrow keys.

Basic usage:

Include the necessary GreenSock’s GSAP JavaScript library and CSS plugin for animations.

<script src="TweenLite.min.js"></script>
<script src="CSSPlugin.min.js"></script>

Create a container for the wheel menu.

<div id="container"></div>

The JavaScript to generate a wheel menu inside the container you created.

document.addEventListener('DOMContentLoaded', function() {
  // image example
  var wheel_data = {"elems":
  [{"name": "Avatar", "file": "icons/Avatar.png"},
   {"name": "DC Comics", "file": "icons/DC Comics.png"},
   {"name": "Icon", "file": "icons/Icon.png"},
   {"name": "Marvel", "file": "icons/Marvel.png"},
   {"name": "Oni", "file": "icons/Oni.png"},
   {"name": "Valiant", "file": "icons/Valiant.png"},
   {"name": "Vertigo", "file": "icons/Vertigo.png"}]};

  // html example
  // var wheel_data = {"elems":
  // [{"name": "Avatar", "html": "<b>%name%</b>"},
  //  {"name": "DC Comics", "html": "<b>%name%</b>"},
  //  {"name": "Icon", "html": "<b>%name%</b>"},
  //  {"name": "Marvel", "html": "<b>%name%</b>"},
  //  {"name": "Oni", "html": "<b>%name%</b>"},
  //  {"name": "Valiant", "html": "<b>%name%</b>"},
  //  {"name": "Vertigo", "html": "<b>%name%</b>"}]};

  var stopPoints = [
    // list of points used for stops
    // X, Y, scale, z-index, transform CSS
    // (position auto-scaled on a basis of 1024/768)

    // example NEW
    {x:120, y:100, scale:1, zIndex:3, z:150, rotationY:40},
    {x:300, y:100, scale:1, zIndex:2, z:50, rotationY:20},
    {x:500, y:100, scale:1, zIndex:1, z:10, rotationY:0},
    {x:700, y:100, scale:1, zIndex:2, z:50, rotationY:-20},
    {x:880, y:100, scale:1, zIndex:3, z:150, rotationY:-40},

  spinner = new jswheel(
    wheel_data.elems,             // wheel item list {elems: [{name: name, file: image.png}, ...]}
    stopPoints,                   // points used for element positions
    {'containerId': 'container',  // wheel container ID
     'transitionTime': 270,       // in ms
     'minTransitionTime': 100,    // in ms, when key kept pressed
     'selectPosition': 2,         // active element position for selection
     'hide': false,               // If this is true, hide wheel after a certain amount of time
     'hideStart': 5000,           // in ms, time after which starts hiding wheel
     'hideDuration': 1000,        // in ms, time for wheel to be completely hidden
     'containerStyle': {          // custom css for the container
       perspective: '1000px',
     'startElem': 'marvel'}       // index of item which serves as cursor

  // we override the scaler function (for element position)
  // if no override, default function uses percentages for positions
  // 'type' parameter is an string telling what we are getting (can be 'x', 'y', 'scale')
  spinner.scaler = function(value, type) {
    return (value);

  // re-render

  window.addEventListener('keydown', function (e) {
    // right
    if (e.keyCode == 39) {

    // left
    } else if (e.keyCode == 37) {

    // space moves to next letter
    } else if (e.keyCode == 32) {

    // enter selects an item
    } else if (e.keyCode == 13) {


You Might Be Interested In:

Leave a Reply