Jump to content
Search Community

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 test
Moderator Tag

Recommended Posts

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? 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...