anabanana

https://tijana.me/ I used animejs to get the effect you see when you click on the 'water', but as you can see, it's not ideal. I want to make it more circular, and also wave to-and-forth more. I was thinking of using gsap's stagger and motionpath to make the lily pads move back and forth more. But since I can't use modifiers to customize the motionPath, I'm not sure what to try?

Hi Jack, Appreciate your response. I don't have a visual demo, but I can describe what I want. I have a screen full of lily pads. I want to simulate a pond, so if a user clicks on the water, it creates a wave, and they float back and fourth for a while before settling down. I can make things move back and fourth, but I'm not sure how to make that radiate from a certain point. Do you have any recommendations?

I'm trying to use a modifier on motionPath, but it appears that's one of the attributes that can't be modified. Can anybody confirm? I'm trying to move a bunch of svg elements back and forth in a radial path, so I thought I could use math to calculate the angle and set a custom path for each element. Is there another way of doing this? motionPath: { path: [{ x: 12, y: 0}, {x: 0, y: 0}], }, modifiers: { motionPath: function(value, target) { const [targetX, targetY] = target.dataset.svgOrigin.split(' ') let degree = getAngle(CLICKED_ON_X, CLICKED_ON_Y, targetX, targetY) path: [{ x: NEWX, y: NEWY}, {x: 0, y: 0}] } }