Can you use modifiers on MotionPath?

[anabanana]

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}]
            }
        }

 

 

[GreenSock]

You're correct that you can't use modifiers on other plugin values like that, but I'm relatively confident there's another way to accomplish what you want. The main problem for me right now is that I don't understand what you're looking for

 

Do you have a visual demo of what you want? 

[anabanana]

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?

[GreenSock]

Do you mean that you want to stagger the animations from the center? You can use the advanced stagger syntax for that, particularly the "from" part. 

 

Sorry, I'm probably misunderstanding because I'm not visualizing it the same way you are in your head. A simple CodePen demo would go a long way to getting us on the same page and finding a good answer for you. 

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

[GreenSock]

Yikes. Performance is terrible on that. I think you'd get much better performance if you used canvas/WebGL/Pixi rather than SVG. The browser has to fabricate every pixel using math for SVG whereas <canvas>/WebGL can leverage raster stuff and just push it to the GPU. All of this is totally unrelated to GSAP, of course. 

 

I'm curious why you used anime.js. Not a criticism - just a genuine question so I can better understand the decision-making process. 

 

This demo may help: 

See the Pen gyWrPO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You could just put each element into a container, so you'd have on "back and forth" subtle movement going on the element itself, and then animate its container with the "spreading wave" effect so they're combined in a sense visually. Just one idea. There are many ways you could approach this. I hope the demo gets you going in the right direction. If you've got any GSAP-specific questions, feel free to post those here along with a minimal demo (CodePen). 👍