How can I use GSAP to help achieve a programatic position change on an element using a custom svg path with a motion blur applied to it?

[cwiggo]

I am using React as part of my stack.

I have two elements:

 1. A circle, made up of a div using css to style it
 2. A square, made up from an svg using a fill colour.

I want to be able to use a library, possibly gsap, to programatically trigger the change in position of the both elements from position (x,y) to position (x,y) on the screen using a custom path (svg) or bezier curve.

With the above in place, I want to be able to apply a motion blur to the circle and square to enable it to look as if there is a blurred trail behind it. 

Can anyone recommend me the the right tools to achieve the above? 

[Cassie]

Hey there! Welcome to the GSAP forums.

First up. Put the react bit on hold for now and just focus on the animation!

 

Here's the motion path side.

 

 For blur you'll probably want to look into using a blur filter - either CSS or SVG, (but be warned there are performance issues with animating filters)

Hope this helps, pop back with a minimal demo if you get stuck!

[SteveS]

As @Cassie suggests, the motion path plugin will be your friend here. I just wanted to let you know that using GSAP in react can be trying and suggest you read the GSAP + React guide as a starter.