Jump to content

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

[need help] simple slot machine with 1 reel

Go to solution Solved by GreenSock,

Recommended Posts


I'm new to JS and GSAP.

Could you give me an advice, how to create a very simple slot-machine with one reel.

My machine has 20 boxes, hidden overflow and must spin from up to down.


When I write simple gsap.to(".machine__box", {y: 2000, duration: 2}); I press start button and my 1-3 boxes just move down and disappear with other 17 boxes (I need to set 17-20 boxes behind 1-3, in order to create loop, but idk how to).




Link to comment
Share on other sites

Thank you for your reply!

I'll try to figure how I can use your code in my project.

Link to comment
Share on other sites

See the Pen gOxodoy by mastertigra (@mastertigra) on CodePen


Here is my code. Start and Stop buttons work properly, but looping is still not ready.

I'm trying to analyze your solution above, but it seems hard for me :)

Link to comment
Share on other sites

  • Solution

I think this thread may help you: 


And here's another approach with a helper function I just whipped up for you: 

// speed can be positive or negative (in pixels per second)
function verticalLoop(elements, speed) {
  elements = gsap.utils.toArray(elements);
  let firstBounds = elements[0].getBoundingClientRect(),
      lastBounds = elements[elements.length - 1].getBoundingClientRect(),
      top = firstBounds.top - firstBounds.height - Math.abs(elements[1].getBoundingClientRect().top - firstBounds.bottom),
      bottom = lastBounds.top,
      distance = bottom - top,
      duration = Math.abs(distance / speed),
      tl = gsap.timeline({repeat: -1}),
      plus = speed < 0 ? "-=" : "+=",
      minus = speed < 0 ? "+=" : "-=";
  elements.forEach(el => {
    let bounds = el.getBoundingClientRect(),
        ratio = Math.abs((bottom - bounds.top) / distance);
    if (speed < 0) {
      ratio = 1 - ratio;
    tl.to(el, {
      y: plus + distance * ratio,
      duration: duration * ratio,
      ease: "none"
    }, 0);
    tl.fromTo(el, {
      y: minus + distance
    }, {
      y: plus + (1 - ratio) * distance,
      ease: "none",
      duration: (1 - ratio) * duration,
      immediateRender: false
    }, duration * ratio)
  return tl;

In action: 

See the Pen yLoprbe?editors=0010 by GreenSock (@GreenSock) on CodePen


Does that help? 

  • Like 2
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.