Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sara Fernandes

Creating a Slot Machine Effect

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

Hello

 

First i would like to thank you for sharing the amazing and useful Greensock.

I am trying to create an animated slot machine, and i tried to use a carousel slider shared on a forum topic (the following link

See the Pen LckBh by bassta (@bassta) on CodePen

) since Blitmask is only avaliable for AS. It doesn't seem to be the best solution. I would like to know if i can achieve the slot machine effect with TweenMax, with a Blitmask's similar effect.

Link to post
Share on other sites

What you need to do is to create a container div with overflow:hidden.  Each of your spinners should be an img tag within the container div. I suggest that the image file contain two copies of the spinner image, one on top of the other.  Position the img so that the second, bottom copy is visible.  Then simply tween the img down until the top copy is visible and use the repeat parameter to do it as many times as you want.

  • Like 1
Link to post
Share on other sites

Hi Sara and welcome to the GreenSock forums.

 

garyw is right, the best way to somehow mimic Blitmask is use am overflow hidden property in the container and dispose your elements vertically. You can even go a little more creative and add a rotation on the Y axis to simulate the slot cylinder. Here's a very simple example intended for other forums post but that hopefully could give you a useful idea:

 

See the Pen 5366f11be0238e46a98cdaf74ae6d882?editors=001 by rhernando (@rhernando) on CodePen

 

Feel free to fork and adapt the codepen in order to meet your scenario.

 

Rodrigo.

Link to post
Share on other sites

Thank you both for your answers!

I figured out a way to do it using the 3D transformations based on the codepen that you shared, that i was avoiding, because of the Internet Explorer compatibility. At least version 11 plays the animation perfectly (the only version that i tested for now), and that does not happen with (only) css animations.

 

Once again, thanks! Greensock has the best forums.

  • Like 1
Link to post
Share on other sites

You're welcome.

 

As far as I know, no version of IE supports preserve-3d so what you could do is rotate each element independently. Since only one number is visible you can rotate it, and using an onComplete callback you can reset their rotations. Very similar to how is done in this sample:

 

See the Pen CeDkc?editors=001 by rhernando (@rhernando) on CodePen

 

Once the slide is completed the previous slide (the one being slide-out) is set to the right of the container. You can do the same but with the rotation.

 

Rodrigo.

  • Like 1
Link to post
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.

×