Learning

Hi guys, I've searched in the forums and noticed that previously when using Stagger, each element has an onComplete which you can individually target, but it seems that the new 3.0 stagger only returns one single onComplete callback. How do we then individually access each onComplete and do things with the targets?

@GreenSock Icic, I guess I'll just stick to the individual element manipulation then. I thought it might be easier as I might want to change more properties like alpha, size, rotation, etc and using gsap I can just pass everything into the set option. But after thinking through and reading your reply, it does seem a little excessive to use an animation engine when I'm not actually making full use of the 'tweening' capabilities of gsap.

Hi guys, I'm working on a little Tsum Tsum game clone. ( https://www.youtube.com/watch?v=iqQrQtorM9c ) I figured that I'll have to use Matter.js to implement the physics of my objects bouncing off each other and dropping into screen. But because Matter.js doesn't have the ability ( I think ) to select multiple objects at the same time using its mouse constraints, I am attempting to simply use dom elements ( since there won't be that many anyways ) and then move them on requestAnimationFrame according to the engine results of Matter.js. This way I have the full control of highlighting my objects when multiple objects and selected via dragging the mouse across them. What I'm thinking of doing is simply looping through my objects array, and finding the respective dom element and then use gsap.set on each of them on every requestAnimationFrame to mimic the physics implemented by Matter.js. Does that sound like a dumb way to implement this or is there a better way in gsap to follow the results of the engine?

@GreenSock Omg, that sounds awesome. It makes the ocd in me super happy. Hehehe.

@ZachSaucier Yup, that's what I was thinking, cos when people say random( 1, 5 ), they kinda thought it will be fairly evenly spread through the numbers, but because of the inclusion and exclusion, but not many people realise this. Or is it just me? Heh. 🤷🏻‍♀️

But if you do rounding, then that means from 1 - 1.49 gets 1, and 1.5 to 2.49 gets 2... etc. It's still not a fair result. 1 and 5 gets a smaller range of results than the rest of the numbers no?

Oh and speaking of the use case, I'm wondering, if you random() an object's position from 0 to the screen's width. It means that there is a small chance of it being at 0 position but no chance of it being in the xwidth of the screen no? Isn't that like a 0.0000001% left leaning random result? But yea it's more OCD than actual practical reason I guess. 🤷🏻‍♀️

Oops, yes I think I got it backwards. Ah, actually I'm asking this not because of a problem I'm facing. It's also more due to curiosity and a little bit of OCD. In spoken language terms if you say a number is 'between' 1 and 5. It would mean it's either 2, 3 or 4. And if you say a number is 'from' 1 to 5. It would mean it's either 1, 2, 3, 4 or 5. But in the case of performing a gsap.utils.random( 1, 5 ). It actually means it's either 1, 2, 3 or 4. ( According to your answer and also the Math.random() doc. ) It has always felt weird to me that it doesn't fit neither the language of 'between' or 'from'. When I'm using Math.random I usually do up a small utility like the last example in the doc you linked to where I can include both min and max. So I just thought maybe for gsap.utils.random() it's something like that or have an option to do so.

Hi guys, I'm wondering if gsap.utils.random include its min/max values, or it's only between both. If I'm doing between 0, 1. Will it only give 0.00001 and 0.99999 on its extreme ends? 'm asking this because most random functions exclude its min but includes its max, etc. Is there a way to include both or choosing either as options?

Hi @ZachSaucier, Oh I see, initially I thought that perhaps there might be some gsap timeline syncing techniques that I might not know of when I posted the question, didn't realise that it's out of scope. 🙏🏻 Really thanks for taking the time to reply. I've actually used most of the pointers you listed in the actual game, but I did a quick hack to post on codepen so I missed a lot of them. But I did not know about the gsap ticker! I am using window.requestAnimationFrame() raw and drawing on canvas for now, but I'll look into the ticker, it seems a lot easier to manage. Is it recommended to .kill() a timeline rather than clear() and reuse? Is it better for memory or perhaps other reasons?

Hi guys, I have a simple stacking blocks game where at the top of the screen there is a swinging block, which when you touch the screen, the block will drop down. At the bottom there is another swinging block, if the falling block hits the bottom block, it will 'stack' and follow it's swinging animation. The issue I have now is that everytime the stacking occurs, there is a slight 'shift' in my dropped block's X. I tried to do up a simple codepen to demo this attached, but it's not as obvious as my actual game. My guess is that because my timeline animation is currentX +/- some amount. And adding this as an animation to my dropping block and syncing it's timeline's time() to the bottom block, it's currentX doesn't match the X it's supposed to stack at. I'm not sure if I'm explaining this correctly. I tried calculating the bottom block's X and it's difference from its original X, and use this difference to add to my dropped block's X before I add it's timeline animation, but the shift became even more obvious in some cases while it solves it in other cases. I'm having a hard time trying to figure out what's the best way to let it sync correctly to the bottom animation while having the 'hit' or 'stack' point to be accurate.

@b1Mind Yea! That's definitely a good starting point, thank you! I'm thinking the waves and mesh of colours seem to be similar to perlin noise. I've seen some similar effects using threejs but I don't think it was used in this case. @ZachSaucier I'd love it if they did a writeup of the gradient effect. They have done a couple of writeups for their previous frontend development stuff and it was great reading and learning material. I've noticed that if you run the konami code on the homepage, you get to adjust the waves and colours. But I can't seem to figure out the gradient code itself as it's all minified and a little hard to understand this way.

Hi guys, This might be a little off topic, but I was wondering if it's possible to animate gradients like how the https://stripe.com/ stripe homepage banner does with gsap?

Thank you for this!

Hey @ZachSaucier, Thanks for the demos! Looks great~