jquery.gsap.js plugin and Bezier - how?

[maskovitz]

I am very sorry for a probably stupid question, I tried searching etc, i most likely just don't understand the syntax...

 

It is said " GSAP takes control under the hood" whiel i can still use animate(). 

 

so my assumption was i would do something like:

 $("#mydiv").animate({bezier:{type:"cubic", values:[{x:100, y:250}, {x:150, y:100}, {x:300, y:500}, {x:500, y:400}], autoRotate:["x","y","rotation", 0, true]}, ease:Power1.easeInOut});

 

this doesn't work... I understand i can just use  TweenLite.to withing the same JS main code an keep having my jquery functionality on the side but well... that is kind of weird inst it.

 

so my question is how to do Bezier within Animate() with jquery.gsap.js? aqnd if i can use latest jquery or not...

 

thank yoU!

[Carl]

Hi and Welcome to the GreenSock forums.

 

 

 

The jquery.gsap plugin is simply to offer a performance boost to existing jquery projects that use valid jQuery.animate() syntax. It doesn't allow you to mix and match GSAP code inside animate(). 

 

The only way to use GSAP Bezier Plugin is with a proper TweenLite.to() tween.

 

Hope this helps clear things up.

[GreenSock]

Actually, since the jquery.gsap.js plugin funnels things through the main GSAP engine (basically TweenLite.to()), as long as you have the appropriate plugin loaded, you should be able to get those special properties to work, like "bezier". Make sure that:

1. You load BezierPlugin (or just load TweenMax because that has TweenLite AND BezierPlugin inside of it already. If you load TweenMax, you don't need to load TweenLite.)
2. Make sure you give the tween a duration. Your code had no duration. And remember, jQuery's animate() method expects time to be defined in milliseconds. 
3. Keep in mind that recent versions of GSAP don't require that the rotational data be defined in radians, so your "autoRotate" parameters should have "false" as the last one, not "true". Or if you're not doing anything special, just set autoRotate:true and it'll use the defaults. 

Here's a simple demo: 

http://codepen.io/GreenSock/pen/e660126743d56f77f37c91e05dc137a9

 

But like Carl said, I'd encourage you to shift to using the standard TweenLite/TweenMax syntax if you can because it opens a lot of other doors to you, like easier sequencing and a bunch of other stuff. But if you like the jQuery.animate() thing, that's fine too (with the plugin of course). 

[maskovitz]

THIS IS AWESOME! thank you so much!