Lark

That is actually really cool. I tried repeatRefresh but couldn't get it to work with the randomizer functions being outer scope, but I guess that if you implement all the colors like this it works just fine, haven't tried that. Thanks!

Hello! I'm trying to make a rain effect that's is at least midly efficient. In the below example, when an element reaches its destination it is deleted, then a new element is created. I would like to, instead, have an element reshuffle its size and color, then move to a new initial position and just fall again. I tried rewriting the generateRainDrop function, to have it take an existing drop and just set its size , color, and position. This worked to the extent that the boxes did reshuffle, but then they stopped spinning - they just fell down. I tried using pause and play in between setting, and also tried using invalidate, to varying degrees of failure. At no point could I get a box to: randomly change size, color and initial position then continue falling and spinning, without recreating the box fully.

Well it still calls a function every single time, but it does look like it fits here. Thanks though Cassie, you've been very helpful the past few days!

In the codepen, the spinning box should swap colors every iteration. I used `onComplete` to call a function that moves the color index further, and the tween should take the current index color from the array at the top. This... well... doesn't work as I expect it to, but I couldn't quite find a way to do this. Checking the colorIndex in the console after every spin shows that it doesn, in fact, change. But the Tween doesn't pick up the new value on the next spin. I wonder why, and I also wonder what the correct way is to do this. EDIT: I solved it myself by making background into a function, figuring that unlike the value, the function would be called every time. However, this doesn't seem right, and I'd still like to know if there's a better way to do this!

Oh, fabulous! That DID do it! replacing `onRepeate` with `repeatRefrtesh` definitely solved it. The callback must have been interfering with something. Thanks so much!

No, unfortunately if you look at it long enough it still snaps back at some point, seemingly randomly. I wanted the "back" ease for the overshoot effect, but it doesn't seem to make a difference anyway.

Hi! I've been following guides and also finding some nice things on the forums, but I got myself stumped. In the codepen I was trying to make a box, that spins around randomly back, then forth, then back again and so on until you get tired. I tried moving the repeat to the tween and adding yoyo, and this is the most reliable way I found to do it. But if you watch closely, every so often the box would snap to a new position, not sure why, and I don't know how to stop it. 😧

Thank you so much, this was perfect! I couldn't find there parameters in the docs, perhaps I missed them.

Hello my friends, I would like to run a simple "fade in" tween (like in the CodePen) on a series of boxes. My code is exactly as appears in the CodePen, but this obviously runs sequentially. I would like to have the boxes appear in random order every time. I also tried a loop I saw elsewhere on the forums, with running from 0 to the number of elements, but this still runs sequentially unless I randomize the numbers myself, (i.e. literally make an array of 0 to n but in randomorder , then loop over that). How should I go about doing this?

You 1st point is rather interesting. Though I do see the error of not specifying px, and maybe this is me completely misunderstanding SVGs, but in the original rect tag I do specify translate(20, 20), so what's that? Is that value translated to px by gsap? Either way thank you so much for the clarification!

Thank you so much! As I said, I ended up using x and y instead of transform, but I did mark this as the resolution since it does answer my original question. Thank you very much for the help, this solved a massive bug for me.

Hey @Cassie, thanks for the reply! So this is slightly awkward, but minutes after posting this I have indeed tried using gsap.set(... {x:..., y:...}) instead of trying to set the transform, and it worked like a charm. I still do not understand why trying to set the transform property to a string bugs out like that (or is that a feature?), and why setting the x and y like this doesn't clash with the existing transform. Edit: In this codepen one can see that trying to move the thing right by setting the transform property just sets everything to 0. https://codepen.io/LarkRanger/pen/vYJZzjK

Hello! I've been trying to utilize gsap to construct a certain tool, and I've run into the exact same problem in these thread: I'm currently using gsap 3.7.1. My case is very similar, where the draggable (and SVG element) is moved around, it's position is defined via transform, and there is another element which may affect this transform, so I need to use update(). Trying to gsap.set(element, {transform: 'translate(...)'}) works unexpectedly and sets the transform to all zeros. I would like to use the parseTransform functionality discussed in these threads but can't find the functionality in gsap 3.0. Does it still exist, or is there an alternative? I need the draggable to be up to date with the element's transform, otherwise it keeps snapping back. I would love to make a codepen example but I cannot for the life of me manage use Draggable in there, since it does not appear as a plugin on the gsap import from npm, so if anyone can direct me on how to do that I'd love to show an example. Otherwise if you understand my issue, by all means, I'd love some help. :)