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.

@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~

Hi guys, I'm wondering how this effect is achieved? https://pitch.com/ What happens is that the hero image slowly zooms out as the user scrolls, revealing that is is a screen within a device, then the device with the hero image scrolls as per normal on the page. I'm thinking that it can probably be achieved with the new scroll trigger plugin, but it's anchored and zoomed, plus the ending when it scrolls normally felt a little confusing as to how it works. Not to mention getting the size right to frame the device just outside the screen based on screen size.

I do want to use absolute values in my timeline to control where it starts. But ah! Yes, I finally see the issue... There a tiny overlap in my fade out and fade in of the same element. Alas... That's the issue. =( Dumb mistake. My bad! Thanks for pointing it out~

Here's what I meant, on first run, it looks fine, but on re-run, the image doesn't fade in.

Hi guys, I'm not sure if anyone has encountered this before, I have the following timeline, this.tl = new TimelineLite() this.tl .set( '.line-1, .line-2, .line-3, .line-4, .line-5', { autoAlpha: 0 } ) .fromTo( '.line-1', 2, { autoAlpha: 0, scaleX: 0.9, scaleY: 0.9, x: '-50%', y: '-50%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 0 ) .to( '.line-1', 1, { autoAlpha: 0 }, 3 ) .fromTo( '.line-2', 2, { autoAlpha: 0, scaleX: 0.7, scaleY: 0.7, x: '-50%', y: '-50%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 4 ) .to( '.line-2', 1, { autoAlpha: 0 }, 5 ) .fromTo( '.line-3', 2, { autoAlpha: 0, scaleX: 0.7, scaleY: 0.7, x: '-50%', y: '-50%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 6 ) .to( '.line-3', 1, { autoAlpha: 0 }, 7.5 ) .fromTo( '.line-4', 2, { autoAlpha: 0, scaleX: 0.9, scaleY: 0.9, x: '-50%', y: '-50%', transformOrigin:'50% 0%' }, { autoAlpha: 1, scaleX: 1, scaleY: 1 }, 14 ) .to( '.line-4', 1, { autoAlpha: 0 }, 17 ) .stop() So basically it's a simple scale up as opacity becomes 1 kind of animation. line-1 and line-4 are normal text, which works fine. line-2 and line-3 are images, which is the problem. When I use tl.play(0) to restart the timeline, the images don't fade in but appears only when it reaches scale 1. It doesn't fade in as before. The first round of playing the timeline works, but subsequent replays of the timeline, this issue appears. Any idea why? This timeline plays in front of an html5 video playing in the background, could that be the issue? Edit 1: Been testing and trying all sorts of ways to see what's the issue. It seems that the tween still runs... It's just that the inherit property now reflects as hidden? But nothing changed from the first playthrough to the replay. And the parent is definitely visible. Tried forcing it to be visible when the tween starts, it flips back to inherit still though once the tween plays. Edit 2: I guess it's not the inherit's issue... I tried using opacity instead of auto alpha. The tween still seems to be moving but it still only can be visible after the tween is complete. =(

+1 for @OSUblake blog!

Hi guys, Thanks for the help! I need to add a +=0 to kick off _gsTransform I need to use [0] when using jQuery to get my object to find _gsTransform Everything is 0, 0 if I don't move it. Ha. I always thought the x, y is relative to either bounding element or screen... guess not. I'll have to check out getBoundingClientRect to see if I can use that then. Cos I'm arranging my squares using a div that wraps and align them, if I have to position each square manually so that I can use it's x and y, seems a little tricky.