pils

This is definitely what i asked for! Thanks for that. Sadly it also shows that probably the overlapping animations (reel 2 starts spinning while reel 1 is still going, etc..) is not possible with the way i generate and animate the reels/symbols now. The reason i opened this topic was because i'm looking to get a effect like this: Where if a certain symbol (in this case the fish scatter) is on reel 3 and reel 4, then the animation for reel 5 reel is longer. This is to build a certain suspense when a condition for a bonus is almost met. Should have maybe asked the question better, but i'm going to play around some more to see if i can come up with a solution for this. If you have any ideas/suggestions please let me know.

Sandbox of the project so far: https://codesandbox.io/s/muddy-water-h2tpb?file=/src/js/Reels.js (it gives some webpack errors in the console but it works fine - might take a few seconds tho) As you can see i'm trying to build a slot-machine. Now i want to do stuff to the animation depending on the symbols that land on each real. For example: If reel 0 is done animating, i want to check what symbols landed on that reel, and optionally change some animation timings for the next reel(s). Now the problem with my code is that the onComplete fires only after all reels are are finisched animating. I'm logging to my console what is happening (you can also see this in the sandbox project after spinning the weels with the green button) and that now looks like this: begin animation Animating reel: 0 Animating reel: 1 etc.. end of animation Symbol 0: symbolBlue Symbol 1: symbolJ etc.. But what i want is: begin animation Animating reel: 0 Symbol 0: symbolBlue Symbol 1: symbolJ etc.. Animating reel: 1 Symbol 0: symbolBlue Symbol 1: symbolJ etc.. Animating reel: 2 .. .. end of animation The code in my reels.js now looks like this: sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } animate(reel, i) { return this.sleep(100 * i).then(() => { console.log('Animating reel: ', i); for (let j = 0; j < reel.children.length; j++) { let lastY = reel.children[j].y; gsap.to(reel.children[j], { duration: 1.25, y: `+=6400`, ease: "back.inOut(0.4)", onComplete: () => console.log('Symbol ' + j + ': ', reel.children[j].texture.textureCacheIds[0]), modifiers: { y(y) { let newY = parseFloat(y) % 800; let difference = newY - lastY; if (newY < lastY && difference < -100) { reel.children[j].swapSymbol(reel.children[j]); } lastY = newY; return newY; } } }) } }) } async spin() { console.log('begin animation'); for (let i = 0; i < this.items.length; i++) { await this.animate(this.items[i], i); } console.log('end of animation'); } What i tried: - I thought maybe a timeline made more sense for this. But could not get this to work, animation got very weird. - I saw this topic, and thought maybe something like await gsap.to() would work, but got an error Unexpected reserved word 'await' Could not think of anything else so hopfully one of you guys can help me out with this. Also might me that there are more issues with the way i try to do this, don't go easy on me Thanks!

Thank you kind sir! I can start working with this. Had a small issue when adding a ease like "back.in" to it. Because, off course, the next value will be less then the last value while doing the easing animation. I now fixed this where the condition also checks that the value is lower then a certain value(-100 now), this feels a bit hacky tho. You have any ideas on this? See codepen: https://codepen.io/luffyy/pen/GROgKRO let difference = newX - lastX; if (newX < lastX && difference < -100) { gsap.set(box, { text: symbols[Math.floor(Math.random()*symbols.length)] }); }

Hi, This codepen is from the modifiers plugin page and i'm trying to adjust it so that when a box goes beyond the 500 point, it not only resets x:0 but also let's me run another function. I want to be able to for example change the background-color of the box when it goes over the 500 point, or maybe the number that is in the box (only change for the one that is going back to x:0). What i tried so far: - In onUpdate run a function when a box goes over 500 > Not sure if i was doing it right but didn't seem consistent. Is there a way to do this?

Wow, finally had some time to play around with this again. And indeed it seems playing around with the values will get the job done. It's not perfect yet but i will get there. Thanks for the help! https://codepen.io/luffyy/pen/GRJjgrw

Wow, this title must make sense. Hopefully the Codepen helps making this clear. So i have this path that i draw with DrawSVG, and it's "removed" after the whole line is drawn. Now i want the remove-effect happening while the line is still drawing on the other end. Lowering the delay on the remove-effect is not working so i think i'm going about this the wrong way. How should i do this?

Hi, i have found a function that creates a random shake effect. The effect is now endless but i want to use this function in my timeline for a x amount of seconds. See codepen for the shake effect, below is kinda how i want it to work. function Tween(){ var T = TweenLite.to(".circle",0.02,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween}) }; function R(max,min){ return Math.random()*(max-min)+min }; var tl = new TimelineLite(); tl.add(Tween) .to('.circle', 1, {scale:50, y: -30}, "start+=0.5") .from('.circle-2', 0.3, {opacity: 0.0, scale:10}, "start+=0.6") .to('.circle-2', 0.6, {x:100, ease: Elastic.easeOut}, "start+=1.25") .from('.blokker', 0.6, {opacity: 0.0, x:15, ease: Elastic.easeOut}, "start+=1.4"); So this adds the shake effect to my .circle class but obviously this keep going and going. Just like the rest of my timeline i want this effect to last for a x time and then move on with playing the rest of the timeline.