Jump to content
Search Community

Animate Plane-Paths with Bezier curves

toru test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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?




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


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

  • Like 1
Link to comment
Share on other sites

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:



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.

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.
  • Create New...