cnapsys

OMG! that is insane... I have to be honest I wasn't expecting that. You sir... are a ROCK STAR. While I was hoping to get a little bit of guidance and steering in the right direction... you have literally blown my mind. This is bananas. I need to pay you something for the time you spent on this. I do have to admit that I will probably spend the next 300 days trying to actually understand that entire code :)) Couple of things that I wanted to ask... The .toIndex(...) method, as of right now, gets a randomIndex from the array on each spin and spins to that. However, on the screen the position of that index seems to be random as well. Meaning, that .toIndex(4...) might not be in the visible area of the #wheel_1 div. Is there a way to make sure the index that the wheel spins to is always positioned in the middle of the 3 visible items? Also, keep in mind I'm still a complete noob and at a first glance I could not see a clear way to change the direction of the spin (from upwards -> downwards). And would it be possible to set this up as a variable so the direction of the spin for each wheel could be randomized? (up/down) Ok, I just realized I'm getting a bit ridiculous with these requests. I apologize. I need to buy you a beer first for the time you already wasted on my silly little project. ?

further simplified pen. (50 lines of js code) 3 days later and I'm still struggling with this... How can I calculate the wrap numbers based on "y" having a dynamic value? Any help is greatly appreciated. I've been chasing my tail for the past 3 days. https://codepen.io/cnapsys/pen/RwJYNRY

simplified codepen + slowed down the animation and removed blur. So here's what I'm trying to do... as soon as a strip scrolls down and the top image reaches the top of the visible area I would like the strip to wrap around to that next position which is -125px from the visible area. If the spin is longer, I would like to wrap the strip on top of the previous one so that no white spaces show up. I apologize in advance if I'm making this sound more confusing... I'm still a complete noob and trying to figure things out. Imagine a real life casino slot reel. when position 10 passes by, position 1 follows it. The reason I found the wrap function confusing was that it seems to be working in pixels not array elements in this case. thank you again for your time and patience with me. https://codepen.io/cnapsys/pen/zYaLweV

Fair enough, let me try to explain my logic a little bit and please feel free to chip in at any point. In all honesty I had no idea how the wrap function worked and was just shooting in the dark plugging in numbers. Each strip has 40 elements in an array. Each item is an image with a width and height of 125px. Thus each strip has a height of 5000px What I'm trying to do is move each strip down on the Y a specific number (newNumber). The reason newNumber is always a multiple of 125 + 10000 is because I'm trying to make sure that each strip "rolls" down at least 2x full turns. Also, by multiplying newNumber with 125 and adding 10k it makes it easier to return at the end the winning position on each strip by doing a modulo to kind of reverse the original operation: win1 = 40-((strip1.y % 5000)/125); win1 = win1 == 40 ? 0 : win1; if (win1 < 39) { win1 = win1 + 2; } else { win1 = 0; } About 10 yrs ago when I initially built this in AS3 with tweenlite and blitmask this kind of logic worked well. I guess I'm having a bit of a hard time making this work the same way with js and css. By all means if this is all wrong please point me in the right direction. Or how would you go about, accomplishing this. Any help is greatly appreciated.

I see what you're saying. How do I go about it then? I thought I need the wrap in order to make sure the strips will repeat once they transition down more than their heights. Or what values do I need to wrap around? Thanks again for taking the time to look at this. I guess I don't understand how gsap.utils.wrap() works

Having some issues loading the images on codepen. Tried hosting them in several places but they fail to display. Nonetheless, everything else works and you can see the issue I pointed out in the console. https://codepen.io/cnapsys/pen/JjZZadp

Hey GS, thanks for taking the time to reply. I'll see if I have the time to whip up a minimize codepen today. I really want to get to the bottom of this. As for the random number you can see it defined in the code I posted initially: var newNumber = randomNumber(0, 39) * 125 + 10000; The randomNumber function is defined like this: function randomNumber(param1,param2) { //console.log(Math.floor(Math.random() * (1 + param2 - param1) + param1)) return Math.floor(Math.random() * (1 + param2 - param1) + param1); } When I send that as a parameter with onCompleteParams:[totstrip,newNumber], I can console.log it just fine. Each time the while iterates totstrip++ console log posts the newNumber generated: E.g. 0:14000; 1:13250; 2:11625 So newNumber does get a new value per each iteration, but I have the feeling that gsap gets the first number and applies that for all 3 iterations. The reason I say that is... that each strip should move on the Y axis the value of newNumber, but they all land on the same spot each time. (on continuous spins as well.

hey all, I just recently stumbled upon a project that I created a long time ago in flash. I used Tweenlite at that time in AS and everything worked perfectly. About a week ago I decide it to rewrite the entire code in js (which is practically almost the same). Upon googling and seeing that tweenlite and tweenmax are now gsap, I thought it would work the same. However, I'm having a bit of an issue understanding why gsap behaves differently... The problem is inside a while loop: function mySpin() { var totstrip = 0; var wrap = gsap.utils.wrap(125, 0); while (totstrip < 3) { var newNumber = randomNumber(0, 39) * 125 + 10000; gsap.to(strips[totstrip], {y: newNumber, duration: 0.5+(totstrip*0.5), modifiers: {y: gsap.utils.unitize(wrap)}, onComplete:chkResult, onCompleteParams:[totstrip,newNumber]}); totstrip++; } } While the animation works ok, and onComplete() receives each Param for every iteration... the problem I'm getting is that the y: newNumber seems to be the same for all 3 strips as if gsap used the first number generated for all 3 iterations. Any pointers are greatly appreciated.

I think I may have found a solution by using the onCompleteParams call: TweenMax.to(this["strip" +i], 2 + (i*.5), {y:strip1.y + newNumber, onComplete:myFunction, onCompleteParams:[i]}); having the tween in a loop... function myFunction(i):void { //trace("finished tweening " + event.target.target); if (i==3) spin_btn.visible = true; else spin_btn.visible = false; when i = 3 it means that the last tween reached its end and the spin button is displayed again. Not sure if this is the best way or if it may cause any other issues but it seems to be working fine.

Hey Carl, I got another question if you don't mind... When playing around with your 3 strip version I noticed that the "Spin" button does not get disabled or hidden while the tween is animated. I tried to incorporate the onComplete: showBtn call at the end of the tween but I noticed a couple of things: The showBtn function gets called when the first strip stops tweening and not at the end of the while loop. It is my understanding that by passing a function onComplete it fires that right away and the button shows up as soon as the first strip stops tweening. Is there a way to call that function at the end of the loop when all the tweens have stopped? Thanks again for your time and have a great day!

Works like a charm. I'll try to incorporate it in my project and will post a link once everything is done. You're the man Carl. Mad props!!!

That looks super super cool. I'll have a look at it in the morning and post back my results. Thanks so much for taking the time Carl...

Hey all, I was following the tutorial posted by Carl (http://snorkl.tv/dev/blitmask/slotDemo.html) and I'm trying to add a couple of things. First I would like to add a blurFilter to the tween but I'm having a couple of issues: 1. When the blur starts the blitmask gets clipped. Since I blur it only on the Y axis for 30px it actually makes the blitmask show 15px more on top and 15 more on the bottom. How could I fix this??? 2. I would also like the blur to fade out when the tween is complete. Using remove: true, removes the blur but the action is too sudden. The animation is blurred nicely and then right as the strips of numbers are about to stops the blur disappears and the numbers are sharp again. But it looks too funky. Is there a way to transition the remove blur process??? 3. Is there a way to get the value/name of the mc the tween stops on? I can trace the randomNumber generated and get the value in px of the tweens for each strip. However, this doesn't really help in the later cycles since the tweens continue from their end positions. This is what I have so far: TweenMax.to(this["strip" +i], 3 + (i*.5), {y:strip1.y + newNumber, blurFilter:{blurY:30, quality:3, remove: true}, onComplete:showBtn}); Any pointers are greatly appreciated. thx and have a great day!!!