Share Posted November 3, 2021 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). Link to comment Share on other sites More sharing options...
Share Posted November 3, 2021 Hi there @mastertigra, We can usually help more effectively if you provide a minimal demo, codepen is great for this. Maybe this will help set you in the right direction though? See the Pen PojYwPp by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted November 3, 2021 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 More sharing options...
Author Share Posted November 3, 2021 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 More sharing options...
Solution Solution Share Posted November 4, 2021 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? 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now