cwiggo Posted June 15, 2022 Share Posted June 15, 2022 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 More sharing options...
Cassie Posted June 15, 2022 Share Posted June 15, 2022 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! 1 Link to comment Share on other sites More sharing options...
SteveS Posted June 15, 2022 Share Posted June 15, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now