Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Recommended Posts

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?

 

Link to comment
Share on other sites

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!

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