Animate Plane-Paths with Bezier curves

[toru]

Hi,

 

I am just trying to animate a plane between n-points sequently (every path is described as a quadratic bezier curve) since 3 hours.

But I dont know how to autorotate it correctly, The paths are dynamically and the plane should always follow on the line, therefore I cant set the rotation initially to a fixed rotation.

I also want to animate the size of the plane, starting with small to normal and ending with small, till the next bezier curve is starting from the end of the first.

 

Can anyone help me with this?

Graphic:

http://pasteboard.co/1A9iuOJd.jpg

 

It is also possible to plot a line behind the plane with TweenMax?

 

See the Pen rxRpEo by anon (@anon) on CodePen

[Diaco]

Hi toru 

 

pls check this out : 

See the Pen yewWBE by MAW (@MAW) on CodePen

[toru]

Really, really, thanks for this.

 

This works like I want it.

I adjusted it a little bit to fit in my application, but its a solid base to work on.

 

It is possible to animate drawing a curve/line for this?

The line should follow the plane -> next point is the position of the center of the plane svg.

 

I saw this example with animating dots on the curve:

http://greensock.com/forums/topic/11997-animate-dot-particles-on-bezier-path/

 

But this is not the optimal way, because when I want to make a smooth line, I need little steps and this results in a lot of DOM elements.

 

I tried to accomplish a way with svg paths, but this wont fit to the given example with tween.time and animating the opacity.

Do you know a solid way to do this?

 

Maybe there is a plot callback of bezier to get the next coordinates, but I did not find such parameter.