jquery JQuery to GSAP

[galahad9gr 0 Likes (Newbie)]

Hello everybody

 

I am trying to convert, refactor a jQuery animation to pure GSAP.

Using gsap.jquery gave several errors. Unlike in the guide written I found one always requires jquery still.

 

I want to convert jquery.animate()  to GSAP function. 
What links and resources are there to help me with converting Jquery to pure GSAP?

 

[GreenSock 12,378 Likes (Superhero)]

Sure, we'd be happy to help, @galahad9gr. 

 

Yes, the gsap.jquery plugin is a jQuery plugin, so that'd require jQuery of course. However, GSAP itself has no dependencies whatsoever. I wonder if maybe you were trying to use gsap.jquery without jQuery and that'd certainly be problematic. 

 

To convert jQuery.animate() calls into GSAP's syntax, it's basically like this:

//jQuery
$(".selector").animate({cssProperty:"value1", otherCSSProperty:"value2"}, durationInMilliseconds, onCompleteFunc);

//GSAP
TweenMax.to(".selector", durationInSeconds, {cssProperty:"value1", otherCSSProperty:"value2", onComplete:onCompleteFunc});

 

Of course GSAP has a much more diverse API for animation, so the above is probably an oversimplification, but it should cover most cases. Remember, duration is in seconds for GSAP, milliseconds for jQuery. 

 

EXAMPLE:

//jQuery
$(".myClass").animate({top:"100px", left:"200px"}, 5000, myFunc);

//GSAP
TweenMax(".myClass", 5, {top:"100px", left:"200px", onComplete:myFunc});

 

I'd highly recommend watching the video at https://greensock.com/get-started-js/ to get familiar with the syntax. And of course the docs are at https://greensock.com/docs. 

 

More learning resources: https://greensock.com/learning

 

Happy tweening!