Animate and randomize children on parent hover?

[joshuaaron]

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! 

See the Pen bGZvRYj by joshuaaron (@joshuaaron) on CodePen

[mvaneijgen]

Hi @joshuaaron welcome to the forum!

 

Let's focus the code a bit, to only include the relevant parts. The on hover effect is easy to fix, but for it, the animation needs to work first. 

 

Your timeline would never refresh, because you have a tween on that timeline that also gets loop infinitely, so you have two infinities (is your head also spinning thinking about that 🫨)

 

The random function you've found has a few settings that make it either get a random value in your specified range and hold on to it or it creates a function that when it gets called gets a new value each time. See the docs: https://gsap.com/docs/v3/GSAP/UtilityMethods/random()/. If you're using it in a tween you can wrap in a string "random(-100, 100)"  which has the same effect as an function based random function (must include repeatRefresh: true)

 

For both the .from and .to values I would use x or xPercent not mixing them, so that the one overwrites the other. You also need to set opacity back to 1 in the .from otherwise when the tween is done, it will get the new values see that it is set to 0 and you'll never see the item again. I hope this makes sense. You probably want to play with the animation a bit to get it more inline with what you want, but if you have any further questions feel free to post back here with an updated demo. Happy tweening!

 

 

See the Pen QWomMje?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[joshuaaron]

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!

[GreenSock]

I would probably take an entirely different approach, like a recursive function call: 

See the Pen MWxVLdB?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Since you've got all the items initially positioned in the upper left corner of that container, you can randomize the x distribution like: 

gsap.utils.random(0, wrapper.offsetWidth - item.offsetWidth)

 

Is that what you're looking for? 

[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!