Jump to content
Search Community

Bezier X Y coordinates confusion - any tutorials for absolute starters?

Demorus 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 have the following code which is the segmet that containers the coordinates of the bezier in a tween:


      /*p1*/{ xPercent: 0, yPercent: 0 }, { xPercent: 200, yPercent: 0 }, { xPercent: 200, yPercent: 200 },
      /*p2*/{ xPercent: 200, yPercent: 400 }, { xPercent: 0, yPercent: 400 },
      /*p3*/{ xPercent: -200, yPercent: 400 }, { xPercent: -200, yPercent: 200 },
      /*p4*/{ xPercent: -200, yPercent: 0 }, { xPercent: 0, yPercent: 0 }],



There are so many X and Y coordinates that im not sure what they do. The first X an Y I figured out but the rest... I keep doing random movements.


Any way to learn this quickly as an absolute starter in bezier curves like me?


Link to comment
Share on other sites

I found these animations constructing a curve to be helpful.


To help me better understand how to work with bezier curves in GSAP, I just played around with creating a bunch of random curves. You can check out the demo I made. If you open your console, you will see it print out a table of all the coordinates. The coordinates are based off of the top-left tile, so that would be { x: 0, y: 0 }



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