Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

16 Newbie

About Learning

  • Rank
    Advanced Member

Recent Profile Visitors

1,684 profile views
  1. 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?
  2. @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.
  3. 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 highligh
  4. @GreenSock Omg, that sounds awesome. It makes the ocd in me super happy. Hehehe.
  5. @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. 🤷🏻‍♀️
  6. 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?
  7. 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. 🤷🏻‍♀️
  8. 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 '
  9. 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?
  10. 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 recomme
  11. 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 i
  12. @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 grad
  13. 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?
  14. Hey @ZachSaucier, Thanks for the demos! Looks great~