Jump to content
Search Community
galahad9gr test
Moderator Tag

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

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:

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

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. 



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

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.
  • Create New...