en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en ru nl eu en en en en en en en en en en uz en en en en en en en en en en en en en en en en en en en en en tl en en en en en en en en en en en en en en en en en en en en en en tl en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en fr en en en hu en nl en de en de en fr en pt en it en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
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
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
Share on other sites
Carl    10,905 Likes (Superhero)
Posted November 13, 2014
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:
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
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.
Share on other sites
kurkumakako    0 Likes (Newbie)
Posted November 14, 2014
Thank you for clarifying these!!
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 1
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
BezierPlugin conflicts with individual properties
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“I continue to be astounded by the sheer breadth of what @greensock can do. Every time I'm like "ooh, I wonder if I can do X", it turns out I can!”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.