Jump to content
Search Community

BezierPlugin conflicts with individual properties

kurkumakako test
Moderator Tag

Go to solution Solved by Carl,

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 don't know whether these are bugs or not, (or i just didn't get the concept of the BezierPlugin properly)

As you see on the pen, if in the properties object i add props like (x, top, rotationXYZ) after the bezier: {'x', 'top', autoRotation: true}, those will be ignored.  
But if i switch them, the BezierPlugin will be ignore the properties which are defined before the bezier: {}.


Ok, it's probably the correct behavior but it would be cool to be able to combine these values like x and xPercent:)



But as you see on the third example of the pen, the rotation parameter will be ignored even if bezier: {autoRotation: false} as long as the bezier: {...} defined first. So this can be also solved by switching them but i like to be sure that i using these things properly.


See the Pen dPoWNr by azazdeaz (@azazdeaz) on CodePen

Link to comment
Share on other sites

Hi kurkumakako  :)


why you want to animate same property at same time !!! ( the Bezier'ill tween your element Position x,y / 2dRotation if autoRotate : true ) 
you think which one should be fired ?!...
if i understand correctly your purpose ; you should to make a container and define two tweens , tween container with Bezier and another tween for #bullet .
pls check this out :

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

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi kurkumakako,


Welcome to the GreenSock forums.

Thank you for taking the time to prepare the CodePen demo. Very helpful.


I don't know if I can address all the conditions at the moment. What's important to keep in mind is that in order for BezierPlugin to do what it does it needs to control the position (and in some cases the rotation) or the element being tweened. You can't tell BezierPlugin to use x / y coordinates and then also have the x / y animated to other values that you specify. It would be a conflict of interest at that point. Also keep in mind that when dealing with x and y properties, BezierPlugin uses a matrix to apply those transforms. The matrix includes values that affect x, y, scale, skew AND rotation (even if autoRotate is false). If you run one of your tweens and inspect the bullet you will see a style like similar to this:

<div id="bullet" style="z-index: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, 0);"></div>

Again, even if you aren't using autoRotate, the matrix will contain instructions on rotation (thus killing any attempts to modify the rotation AFTER the tween has been rotated). You can rotate your element however you like before the BezlerPlugin tween gets created and that will be honored throughout the tween.


An additional note, when you use xPercent in a tween it does not use the matrix but creates a separate transform style like

<div id="bullet" style = transform: translateX(50%);"></div>

So, technically you should be able to use BezierPlugin to tween along a path using x and y, and separately tween xPercent and yPercent.

Likewise, you can tween left and top while BezierPlugin is doing x and y.


In a nutshell though, try not to create tweens that compete with values BezierPlugin puts inside its matrix.


Does this help? Let us know if you need more clarification.

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