Learning

I think I got it. My main issue was that if my item 10 is already delayed 10 seconds, even if it plays immediately it is already delayed. But I realised that's why all my items are slowly syncing up. They still should all be max delayed so it continues the spacing. Thank you! Always nice to learn!

Hey Jack, Thanks for your reply. It does make sense to make it a recursive function. What I'm a little confused about is why onComplete we are adding a max delay? I tested and we do have to add that, but I can't seem to logically understand it. After the initial delay, wouldn't each recursive call be already delayed, so we don't have to add a delay anymore?

Here's a pen on the issue, essentially, i'm trying to spread out the particles animating, but it seems they eventually sync up as the timeline repeats. https://codepen.io/kelvinzhao/embed/wvZwpzJ

Hi guys, I have a set of divs that I want to simply loop infinitely moving from bottom of the screen to the top and stagger them. This is the code I'm using, I have a problem because the timelines of each div is of a different length, thus when it repeats, it eventually chases up and end up with all divs moving at the same time. How can I fix this? ``` const promises = document.querySelectorAll(".promise"); const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const reset = (promise) => { const width = windowWidth * gsap.utils.random(low, high); gsap.set(promise, { opacity: 1, width: width, y: () => -width, x: () => gsap.utils.random(-width / 2, windowWidth - width / 2), }); }; promises.forEach((promise, i) => { reset(promise); const tl = gsap.timeline( { repeat: -1, ease: "none", onRepeat: reset, onRepeatParams: [promise], }, 0, ); tl.from( promise, { duration: 1, y: windowHeight + promise.getBoundingClientRect().height, }, i, ); }); ```

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.