joshuaaron

@GreenSock Oh this is really cool, wouldn't have thought to make a recursive function for this - very clever. Thank you, appreciate the help here!

Hey @mvaneijgen appreciate the quick and detailed reply! Thanks for pointing out some of the oddities, think I've got to dig a little deeper on the docs here. But all that makes sense! I'm playing around with some of the values and might not understand the correct way to do this yet. It seems at the beginning of each iteration the ball is frozen for a little bit prior to animating and shifts and I can't work out why this is. Is there a way to scope the xPercent/yPercent based off the parent 'wrapper', not the individual item? I'd like to be able to place each item randomly inside the wrapper along the x and y axis. My first thought was to just use `x` and do something like this: const randomX = gsap.utils.random(-20, wrapper.offsetWidth, 1, true); tl.fromTo( ".item", { opacity: 1, x: randomX(), ... but this doesn't seem to work as expected either. Also, when adding the mouseenter/leave events to play/pause the timeline, is there a way to finish the current animation iteration before ending/pausing so it doesn't pause midway? If this is asking too much I apologize, feel free to just point me to the right section of the docs and I can dig. Thanks a lot!

Hi all, first post and just getting into GSAP. I'm trying to recreate the effect seen in This Hyperplexed video. Essentially, when hovering the parent wrapper of the gradient text, elements should be placed random relative to that wrapper each animation iteration, and from there I just want to animate them up ~20px, and fade them out. I've tried using the repeatRefresh property on the timeline, but I'm assuming that doesn't work for setting the 'from' values? I also want this to run infinitely while the mouseenter event has fired until the mouseleave event fires, but to ensure the final iteration fires before it finishes so it doesn't end abruptly for each child/item. May need some help here, TYIA!