Winwheel.js Tutorials & Documentation

Learn how to use Winwheel.js by following the tutorials and referring to the class references.


Note that this documentation is for Winwheel versions 2.0 onwards; 1.x versions were very different and were learned by reading the comments in the code.


Tutorials

  1. Getting Started
  2. Constructor Parameters
  3. Segment Colour and Text
  4. Altering Segment Properties
  5. Adding and Removing Segments
  6. Text Alignment and Orientation
  7. Colours, Lines, and Fonts
  8. Wheel Radius and Center Point
  9. Creating a Wheel with an Image
  10. Prize Pointers and Wheel Backgrounds
  11. Animation Introduction and Spinning Basics
  12. Animation - More Details
  13. Getting the segment (prize) pointed to
  14. Setting the Prize to be won before spinning
  15. Getting the segment clicked
  16. Creating Pie graphs
  17. Creating a Wheel with one Image per Segement
  18. Displaying Pins
  19. Playing Sounds and Music
  20. Making it Responsive

Class References



Other Resources



GreenSock's Animation Platform

To create advanced animations see...