Jump to content
GreenSock

maskovitz

jquery.gsap.js plugin and Bezier - how?

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 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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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). 

  • Like 4
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.
×