BezierPlugin conflicts with individual properties

[kurkumakako]

Hi!

 

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

[Diaco]

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

[Carl]

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.

[kurkumakako]

Thank you for clarifying these!!