Jump to content
GreenSock

SakalaWeb

BezierPlugin path problem

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 try to make marker jumping from button to button in navbar. But don't know why my bezier path acting weird.

What am I doing wrong? How to make it go to half distance between buttons and up, like in karaoke for example?

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the providing the demo. I don't have a ton of time to try to debug all the code but I did try to log out the values you are tweening to and found a bit of an oddity.

 

  console.log("point 1 ", markerRect.left, markerRect.top );
  console.log("point 2 ", (btnRect.left - markerRect.left)/2, markerRect.top-20 );
  console.log("point 3 ", btnRect.left+4, markerRect.top-10 );

 

Press on button4 and then go back to button1

 

"click"
"tweenMarker()"
"point 1 " 1352 47
"point 2 " -649.609375 27
"point 3 " 56.78125 37
"tweenMarker() End"
 
I don't think you want the x value on point 2 to be -649.
 
  • Like 3
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.
×