Jump to content

Search the Community

Showing results for tags 'slot game'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. Hi, I am working on a box system that users can open and have an animation to show what they have won. At the moment it is not working. const wrapper = document.querySelector(".c-container"); const boxes = gsap.utils.toArray(".c-item"); const wins = gsap.utils.toArray(".win"); let itemWidth = boxes[0].clientWidth; let wrapWidth = boxes.length * itemWidth; function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function getPosWinner(winner) { const boxes = gsap.utils.toArray(".c-item"); const index = boxes.findIndex((box) => (box = winner)); console.log(index); let itemWidth = boxes[0].clientWidth; let wrapWidth = boxes.length * itemWidth; let desiredStart; if (index === 0) { desiredStart = 0; } else { desiredStart = index * itemWidth; } let minDistanceToEdgeAllowed = 4; var desired = winner; var minPos = desiredStart + minDistanceToEdgeAllowed; var maxPos = desiredStart + itemWidth - minDistanceToEdgeAllowed; return getRandomInt(minPos, maxPos); } var spin; spin = gsap.timeline({ smoothChildTiming: true, autoRemoveChildren: true, //onComplete: openModal }); spin.set(boxes, { x: (i) => i * itemWidth, }); var pos = getPosWinner(wins[0]); spin.to(boxes, { duration: 7, delay: 0.2, ease: "circ.inOut", x: "-=10000", modifiers: { x: (x, target) => { const s = gsap.utils.wrap( -itemWidth, wrapWidth - itemWidth, parseInt(x) ); return `${s}px`; }, }, }) .to(boxes, { duration: 3, ease: "none", x: pos * -1, }); console.log(wins[0]); function openModal() { var myModal = document.getElementById("WinItem"); const modal = new Modal(myModal); modal.show(); } The JS code <div class="slider-container shadow rounded"> <BIconCaretDownFill class="fs-2 trigger" /> <BIconCaretUpFill class="fs-2 triggerTwo" /> <div class="c-container pt-1"> <div class="boxes"> <div v-for="item in lootItems" :key="item"> <div class="c-item" :class="{ win: item._id === winningItem }"> <LootboxContent class="lootboxItem text-light" :loot="item" /> </div> </div> </div> </div> </div> The container with items I start with making a array of items that people can win these items are inside the container. then I get the pos of the winning item. when I got that I spin the boxes a couple of times and then it should stop at the winning object (in the middle of the container) how it looks right now How it looks after its finished Hope you can help me. Thanks in advance edit: simplified codepen: https://codepen.io/nightfly-student/pen/OJQvGzN
  2. When I spinning the reel using tween-Lite plugin reel spinning is not look smooth specially when movement is slow(Slot Game). when reels slow its show jerky kind of movement in reel spinning.Any help or suggestion please welcome.