Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JIZA

MotionPathPlugin - How to remove jerks when cornering?

Recommended Posts

https://codesandbox.io/s/lingering-bird-wggrl

 

Hey guys!

I have a problem, I can not make smooth turns without jerking.

This happens when the car approaches the bridge.

I tried to smooth the svg path itself, but for some reason it turns out even worse. by using https://yqnn.github.io/svg-path-editor/

PathCars :

 

M 2313.22 1939.62 c -132.3 -0.39 -245.6 -39.38 -250.35 -41.04 l -2.3 -0.8 l -118.57 -50.78 l -24.63 -14.71 c -118 -79 -195.57 -113.86 -260.37 -131.29 c -56.19 -11.24 -109.8 -23.43 -123.8 -30.43 l -16.41 -7.21 l -16.76 -9.71 l -139.04 -77.25 c -73.38 -40.07 -130.76 -86.57 -170.54 -138.19 c -38.74 -50.28 -61.47 -105.73 -67.55 -164.81 c -5.29 -51.4 2.21 -104.72 22.28 -158.49 c 14.89 -39.88 36.76 -80.1 65.01 -119.54 c 45.78 -63.92 93.09 -104.86 98.34 -109.32 l 2.08 -1.77 l 1.65 -1.24 c 2.17 -1.69 45.49 -35.71 94.8 -93.37 c 44.72 -52.3 104.01 -135.73 132.52 -236.2 c 20.59 -72.55 65.39 -134.53 133.15 -184.22 c 49.01 -35.93 110.15 -65.26 181.74 -87.16 c 100.09 -30.62 193.19 -38.25 221.78 -44.37 c 72.73 -12.48 136.3 -16.01 202.43 -9.78 c 55.07 5.19 108.88 16.95 159.92 34.97 c 67.53 23.83 113.29 52.7 133.31 66.75 c 16.29 7.63 46.63 23.36 80.12 48.25 c 64.92 48.27 112.72 109.48 138.22 177.02 c 18.4 48.73 25.55 100.85 21.25 154.9 c -4.65 58.4 -22.84 119.5 -54.08 181.6 c -65.48 130.2 -47.14 241.55 -25.9 370.48 c 10.66 64.7 21.68 131.6 21.4 202.27 c -0.33 84.07 -16.99 160.3 -50.95 233.06 c -20.42 43.77 -47.41 82.12 -80.21 114.01 c -29.97 29.14 -65.08 53.13 -104.33 71.32 C 2467.45 1925.06 2394.71 1939.62 2313.22 1939.62 z z

The car twitches, how can I fix it? (

Link to comment
Share on other sites

Does using alignOrigin: [0.5, 0.5] on the motionPath help?

 

Sometimes is just takes a little bit of trial and error to get it to look nice. Maybe the demo in this thread can help you out. He's doing something with race cars, and they seem to follow a pretty nice path.

 

 

 

Link to comment
Share on other sites

42 minutes ago, OSUblake said:

Does using alignOrigin: [0.5, 0.5] on the motionPath help?

 

Sometimes is just takes a little bit of trial and error to get it to look nice. Maybe the demo in this thread can help you out. He's doing something with race cars, and they seem to follow a pretty nice path.

 

 

 

Oops, I threw off the wrong sandbox (Updated post https://codesandbox.io/s/lingering-bird-wggrl

Link to comment
Share on other sites

It looks like your path just needs some fine tuning. For a smoother curve, you need to make sure the anchor points form a straight line, kind of like this.

 

image.png

 

 

Some SVG editors can automatically to do that for you, although I didn't see that option in the one you were using. Boxy SVG is another good one you can use online. If you double click a point, it should automatically make the curve smooth for you.

 

https://boxy-svg.com/

 

I would also try to reduce the amount of points if possible. The less, the better.

 

  • Like 2
Link to comment
Share on other sites

18 minutes ago, OSUblake said:

It looks like your path just needs some fine tuning. For a smoother curve, you need to make sure the anchor points form a straight line, kind of like this.

 

image.png

 

 

Some SVG editors can automatically to do that for you, although I didn't see that option in the one you were using. Boxy SVG is another good one you can use online. If you double click a point, it should automatically make the curve smooth for you.

 

https://boxy-svg.com/

 

I would also try to reduce the amount of points if possible. The less, the better.

 

Thank you, I will try to smooth the corners. If it doesn’t work out, I will write here)

Quote

I would also try to reduce the amount of points if possible. The less, the better.

Didn't quite understand what you mean

Link to comment
Share on other sites

20 minutes ago, JIZA said:

Didn't quite understand what you mean

 

Try to delete some of these points. You probably don't need that many.

 

image.png

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

16 hours ago, OSUblake said:

 

Try to delete some of these points. You probably don't need that many.

 

image.png

 

not working for me(

tried removing points and smoothing paths, ends up even worse

Link to comment
Share on other sites

I've tested it out - if you set alignOrigin: [0.5, 0.5] It's a lot better, if your origin isn't at the center of your element you'll get larger movements as you hit corners.

Don't try to offset the cars from the path - create the paths for the cars to move along exactly where you need them.

 

Hope this helps!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@OSUblake boxy svg looks really cool! Thx for sharing.

 

 

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