Jump to content
GreenSock

cwiggo

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?

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

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.

  • 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.
×