Jump to content
Search Community

Slotmachine with JS and GSAP

houseshow test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,


first of all i wanna say thanky you very much @ the GS Team, for this awesome libary.


Im pretty new to Javascript and programming overall, did watch some Javascript Tutorial and did read a litle bit about it. Did only work with HTML and CSS before (animationwise only with transitions). Basicly im trying to learn Javascript to code a Slotmachine,

a pretty complex one (which has a working php script and did work in flash before), but unfortunatly flash isnt the best for mobile devices, so i guess going with Javascript is the way to go.


As i said im new to Javascript, i did code a basic Slot this night. Which does not more then spinning the reels on a button click with random symbols appearing, i did not try to connect it with php yet (ill do this after it works as it should). My Slot got 5 Reels with 3 Symbols each reel (at all it got 6 Symbols for the animation per reel, as im resetting the position for the reelanimation after the 3 symbols are out of the viewfield of the reel.)


So, i got this working with a semifluid animation, but my problem is the animation lags (probably cause alot of things are done at the same time) at all im moving 30 125x125px divs at the same time + changing the symbols. My code for this is about 400lines long, (could be much shorter if i optimize it).


Im wondering if there is a posibility to do such a complex animation without lags just with JS and GSAP, or is it in this case nessecary to go with Canvas? If you think that it is possible to get a smooth working slot, which solution would you use?





Gonna give it another try, with another idea which i had and will post a codepen link, after im done. Maybe you can give me some hints afterwards.

Edited by houseshow
Link to comment
Share on other sites

Sure, a slot machine is totally possible without canvas


Pull the lever here: http://gannon.tv/envato/edgeslotmachine_demo/


That demo uses EdgeAnimate from Adobe and GSAP for the animation.

You can purchase it here: http://codecanyon.net/item/edgeslotmachine-html5-slot-fruit-machine-game/8593552?WT.oss_phrase=jquery&WT.oss_rank=1&WT.z_author=chrisgannon&WT.ac=search_list


Not exactly sure how your slot machine is constructed or how you are randomly changing the symbol so I'm really not sure how to give advice on how to fix what you are doing. 


Best way to get specific help would be to create a simple CodePen demo that shows one reel working, nothing fancy. Just enough code to see what you are doing.


You can learn how to do that here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 2
Link to comment
Share on other sites

Thank you for your post carl,


i dont think the method used at the edge slot machine is suitable to 3liners. I want a modern onlineslot animation,

where actualy real symbols spin down, which getting faster and is slowed at the end. I allready found some tutorials, about slotmachine but the problem is, they are all 1 liners and none got a animation like the one im searching for.

The one, which gets closest to what im looking for is this one: http://bravenewmethod.com/2013/03/14/simple-slot-machine-with-html5/ but for me, this one lags a litle.


As mentioned, here is my new try.. unfortunatly it would be too complicated to get this running in codepen so i uploaded the packed folder. Just unrar it and run the html file and everything should work as it should.




The Animation isnt timed pretty good at the moment, but atm im too tired to fix this. But my mainproblem still occurs, you will notice small lags when the 3 symbols are setted back to the top. Another problem i came across is, i would like to have an annimation which i can repeat easely (so i can let each reel spin longer than the others). I can archieve that if i manualy add more repeats in the middle of the animation but i guess there are much more easier ways. Does anyone got an idea how i can realise my wishes and getting a animation without lags.


Thank you very much for your awnsers.

Link to comment
Share on other sites

I took at look at your file. Looks like it is working pretty well. Unfortunately, I'm not really sure how to decipher it. 

For smoother performance perhaps try animating y instead of top. 

y will use a css transform value which are known to be faster and smoother than positional values.


We really have to stay focused on helping with the GSAP API. Building slot-machine logic is a bit beyond what we do. 


If you were to set up a single reel in CodePen it might be a fun challenge for some of our members to try to help you out with the randomness of the duration, but this is going to require some time and its not really what we do here. 

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

I built a minimal slot-machine animation here:  Its buggy but you should see the idea.  Not much logic is needed for the animations.

See the Pen LGoNrE by dax006 (@dax006) on CodePen


Change the css to set your symbols to whatever image you want, and add a button to trigger the 'slowing' tween.... I took those out for the codepen.. Here is the full version  http://johnktejik.info/slots/v2/index.php

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...