MotionPathPlugin (start / end positions) doesn't work more than 1, in React, why?

[JIZA 3 Likes (Newbie)]

https://codesandbox.io/s/zen-sunset-jf3fm?file=/src/App.js

 

When 

 motionPath{ 

        start: 0.5,

        end: -0.65,

}

Animation fires twice, how to fix it in React?

Because, I need the element to start moving near the start and end at the finish

https://prnt.sc/1zbakcb

And how to align so that the movement follows the path of the road

[OSUblake 18,535 Likes (Superhero)]

Welcome to the forums @JIZA

 

23 minutes ago, JIZA said:

Animation fires twice, how to fix it in React?

 

I'll need to check on that behavior, but the easiest solution is to just draw your SVG path at the correct start and end points.

 

Another option is to animate the progress of the timeline like this.

 

https://codesandbox.io/s/red-brook-xvwi9?file=/src/App.js

 

[OSUblake 18,535 Likes (Superhero)]

7 minutes ago, OSUblake said:

I'll need to check on that behavior

 

Yes, it looks like that issue will be fixed in the next release.

 

 

 

[JIZA 3 Likes (Newbie)]

43 minutes ago, OSUblake said:

Welcome to the forums @JIZA

 

 

I'll need to check on that behavior, but the easiest solution is to just draw your SVG path at the correct start and end points.

 

Another option is to animate the progress of the timeline like this.

 

https://codesandbox.io/s/red-brook-xvwi9?file=/src/App.js

 

Thank you very much. You have a great library, I recently started using and learning about it. Cool😍

[JIZA 3 Likes (Newbie)]

Amazing! Very cool library. And thanks for the support!