Jump to content
Search Community

[need help] simple slot machine with 1 reel

mastertigra test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello!

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).

 

 

asd.png

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 3
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...