Aligning items in MotionPathPlugin

[PG1]

I am trying to animate the aeroplane svg along my line path. It seems that regardless of the orientation of the aeroplane when the page renders, the tween always grabs it and applies it at a slight slant (it's not facing directly forward on the path). Does anyone know how I control it? Not having any luck with transform: rotate.

 

Cheers  

See the Pen dyXXObR by petegarvin1 (@petegarvin1) on CodePen

[PG1]

Also - I note from other forum posts that dashed paths weren't supported by the plugin (although some workarounds were offered), has this changed recently? Those posts were a few years old

[PointC]

You could try setting your autoRotate to something like 25°. 

autoRotate: 25,

You do have some sharp turns in there so it will still be a bit jumpy.

 

3 hours ago, PG1 said:

Those posts were a few years old

 

That info is still accurate. You'll want to use a mask to animate a dashed path. I have a whole tutorial about the technique on my training blog.

https://www.motiontricks.com/svg-dashed-line-animation/

 

Hopefully that helps. Happy tweening.

[mikel]

 

... or this could be an option

 

See the Pen PozzmaV by mikeK (@mikeK) on CodePen

 

Happy flying ...

Mikel

 

[PG1]

8 hours ago, PointC said:

You could try setting your autoRotate to something like 25°. 

autoRotate: 25,

You do have some sharp turns in there so it will still be a bit jumpy.

 

 

That info is still accurate. You'll want to use a mask to animate a dashed path. I have a whole tutorial about the technique on my training blog.

https://www.motiontricks.com/svg-dashed-line-animation/

 

Hopefully that helps. Happy tweening.

Brilliant article - got my dashed line working in no time - thanks so much!