NightlyFly Posted May 31, 2022 Share Posted May 31, 2022 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: See the Pen OJQvGzN by nightfly-student (@nightfly-student) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Hi there! Welcome to the GSAP forums. This demo may be helpful. Good luck with your project. See the Pen PojYwPp by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
NightlyFly Posted May 31, 2022 Author Share Posted May 31, 2022 Hi, that has been uses already! But it has nothing to do with my question sadly. I need to stop on the winning pos. Thanks anyways. Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 It looks like your example isn't wrapping by a glance at the screenshots you posted. If you need more help can you possibly make a minimal demo as we ask in the forum guidelines. Thank you! Link to comment Share on other sites More sharing options...
NightlyFly Posted May 31, 2022 Author Share Posted May 31, 2022 Hi So I made a mimial codepen to simplfy the issue. I want the rotation stop at the win class after like 6 or 8x rotating and slowly slowing down on the .win class one 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Heya! I had a little crack at this for you. The cool thing about the helper function from the docs is that it returns a timeline, and you can animate the progress of timelines. I've created a new timeline where we animate the progress of the horizontalLoop timeline from 0 to 1 a few times to create a 'spin', then we animate the progress to a certain index value based on which element has the winning class. 🥳 This won't look great though as all the tweens are linear in order to space everything out nicely. 🤔 To add the nice velocity that a spinning wheel would have, fast at first and easing to a stop, we can animate the progress of this new timeline and add an ease to it. There is likely a better solution out there but this is the route my brain took and...well, It works. That's usually my criteria for judging a solution Hope this helps you! See the Pen ExQLYoY?editors=1011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
NightlyFly Posted June 1, 2022 Author Share Posted June 1, 2022 18 hours ago, Cassie said: Heya! I had a little crack at this for you. The cool thing about the helper function from the docs is that it returns a timeline, and you can animate the progress of timelines. I've created a new timeline where we animate the progress of the horizontalLoop timeline from 0 to 1 a few times to create a 'spin', then we animate the progress to a certain index value based on which element has the winning class. 🥳 This won't look great though as all the tweens are linear in order to space everything out nicely. 🤔 To add the nice velocity that a spinning wheel would have, fast at first and easing to a stop, we can animate the progress of this new timeline and add an ease to it. There is likely a better solution out there but this is the route my brain took and...well, It works. That's usually my criteria for judging a solution Hope this helps you! Hi thanks for this! this is amazing, now the question is can the totalloops be stopped earlier to prevent going full rotation to find the winning number? because as shown in your post it stops directly, but it doesn't do that if the number is before or after the full totalloops ended. Basically if after the full rotations the number it stops on is 0 but it has to go to 10 it will speed up randomly. Thanks in advance! Sorry for all these questions, I cant find to see answers on the web regarding these issues. edit: You can see what I mean when you put winner class on 10. Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2022 Share Posted June 1, 2022 Heya, glad this helped! Yeah, you won't really find specific answers about this on the web because this is more of a logic question really. The second tween 'speeds up' if it's a higher number because the wheel has a further distance to travel but the duration is still the same. You could get around that by adjusting the time depending on the winningIndex value. See the Pen ZEroxOE?editors=1011 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
NightlyFly Posted June 1, 2022 Author Share Posted June 1, 2022 Amazing thanks for the tips. I think this solved all my issues. Thanks for your time. Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2022 Share Posted June 1, 2022 pleasure! 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