Jump to content


getting started or not

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

Now, it seems that i'm doing it all wrong..or not...


Do i need to load the Jquery lib first or not? As i understood, gsap is 'selfsupporting' so i thought there is no need to load in jquery.


But then how do i use the selectors? I seems that i can not use the $ selector ( '$ is not defined') ;

How can i use $(document).ready(function() ?


i'm loading the files from cdn : CSSPlugin.min.js , EasePack.min.js and TweenLite.min.js

Link to comment
Share on other sites



GSAP will run fine without jQuery, there is absolutely no dependency on jQuery. Using jQuery does offer a lot of conveniences though in terms of selecting the elements that you want to tween. We strongly recommend using jQuery for selecting elements, we're just not terribly fond of it's animate() method  8-)


If you want to use


$(document).ready(function() or selectors like $("#nav span) then yes you will need to load jQuery. You can load jQuery before or after your gsap files. 


If you don't load jQuery at all the only string selectors you can pass into TweenLite/Max are IDs


There is more info and code samples on this page: http://www.greensock.com/update-2013-01/


Let us know if you need any more help.

Link to comment
Share on other sites

In fact greensock doesn't depend on any other library, now if you want to use greensock's JQuery animate plugin and JQuery selectors you'd need to load the library. Something like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset=utf-8" />
<title>Untitled Document</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/plugins/CSSPlugin.min.js"></script>




And then you can insert your script between the body tags. If you're using JQuery:




If you're not using JQuery or other library, then you need to use pure javascript what brings the issue of crossbrowsing, which is not a small one, for that reason i will recommend you to use JQuery or other library (prototype is a good one to replace JQuery).


Also using JQuery brings the benefit of a library that has been ultra tested and has lots of information, dedicated sites, tutorials, plugins, books, etc. to help you in learning how to use it.


If you're interested in using JQuery  i can recommend you the following sites:




This is the official JQuery learning center, for the basic stuff to get started.




Blog dedicated completely to JQuery, lots of plugins and techniques, from beginner to advanced user.




Oscar Otero from Spain created a JQuery cheat sheet, this is not a way to "cheat" in JQuery because there's not such thing as that, but is q quick guide to the official JQuery api reference for different versions of the library.




Mozilla's developer network is always a good point for references, they have a lot of documents, tutorials and links to good resources.




And last but not least is stackoverflow, which is some kind of web development google, there's a lot of  questions in there and also a lot of answers.


Now if you're looking for a book to read I honestly wouldn't put that as a top priority, I've read books but didn't learn a lot from them but I'll recommend you the following:


Javascript Step by Step For beginning with basic Javascript.


Learning JQuery To learn the basics about JQuery.


Well I hope this helps you a little.



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