Jump to content
Search Community

TweenMax Bezier and Canvas quadraticCurveTo fitting

www 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

Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve.

The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object.

That curve datas are given by 


So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve.

Could please someone help me understand what i'm doing wrong?


See the Pen ggdeWP by www_ (@www_) on CodePen

Link to comment
Share on other sites

Hard to tell. Your code is hard to read, and it looks like your mixing CSS and canvas together. That might be messing your coordinates up.


If you want a quadratic looking curve, why don't you just start with a one to begin with? It's easy enough to calculate a point through the curve. These use SVG, but it works exactly the same using canvas.


See the Pen c298db6e99eef0b9258968aa148a6d0c?editors=0010 by osublake (@osublake) on CodePen

See the Pen pbEBWP?editors=0010 by osublake (@osublake) on CodePen


And a rocket that makes it halfway...

See the Pen ?editors=0010 by osublake (@osublake) on CodePen


Sine.easeInOut is the most accurate ease for ballistics.

  • Like 4
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...