Jump to content


jQuery wrapper (animate, stop)

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

Hi, I am looking for a commercial version of your product. Is there an easy way to test GSAP on existing jQuery based application without rewriting the entire code? From what I saw in the demos jQuery selectors are supported. Now one would only need to create a plugin, say jQuery.GSAP_animate to keep the pattern of jQuery.animate(properties,options), same thing for stop([clearQueue ] [, jumpToEnd ]); any hints to alpha, beta versions of such a wrapper or other solutions are highly appreciated as well. Thanks.

Link to comment
Share on other sites

We haven't created a jQuery plugin like that yet, but it is definitely something we're interested in looking into after we accomplish a few other things. We're hard at work enhancing the platform, adding features, improving support, cranking out training materials, etc. but I think it's a great idea. If you end up tackling the plugin yourself, we'd love to see it.


One other thing to keep in mind: we'd probably want to create new methods like tween() and timeline() that return TweenLite/TweenMax/TimelineLite/TimelineMax instances rather than jQuery objects so that they could be controlled, appended, inserted, etc. effectively. Right now, the animate() method just spits back a jQuery instance which isn't ideal in many situations (although it's perfectly adequate sometimes).

Link to comment
Share on other sites

Hi Jack, thanks for your quick answer. We have done basic translation into a jquery plugin with one problem left so far: since easelookup.find is not implemented with js version (this forum info) could you please assist with a way of mapping standard jquery and ui easing strings into yours? Heuristic best match is ok for beginning. easeInQuad, easeOutQuad, easeOutCirc and easeOutCubic are of particular interest. Thanks.


'swing', 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart','easeInOutQuart', 'easeInQuint','easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'

Link to comment
Share on other sites

Stand by - I'm working on a solution for you...

Link to comment
Share on other sites

Okay, I have good news for you. I just uploaded an update to GSAP. Not only does EasePack now include EaseLookup so that you can do things like EaseLookup.find("Elastic.easeOut"), but I integrated some of the functionality into the core engine so that you can define eases by their names (Strings) like ease:"Strong.easeOut" or in the reverse order jQuery-style like ease:"easeOutStrong". I even added "linear" and "swing" to make the jQuery folks happy :)


The only caveat is that the eases must be loaded in order to work. So, for example, all the standard ones like Quad, Cubic, Quart, Quint, Strong, Linear, Power0, Power1, Power2, Power3, and Power4 come in the main TweenLite.js file but you'd have to load EasePack in order to get Elastic, Bounce, Circ, Sine, SlowMo, SteppedEase, etc. If you try using "easeOutElastic" when EasePack wasn't loaded, you won't get any errors - it will just default to the TweenLite.defaultEase which is normally Quad.easeOut.


TweenMax, of course, has EasePack embedded inside of it, so you don't need to worry about any extra loading there.


The other piece of good news is that all this functionality only added about 0.1kb. I found some ways to make EasePack even more efficient so it's actually smaller than before whereas TweenLite is slightly bigger.


Please download the latest zip and give it a shot. Let me know how it works for you.

http://www.greensock.com/gsap-js/ (or if you're a Club GreenSock member, log into your account at https://www.greensock.com/account/ and get it inside your bonus zip with all the extras).

  • Like 1
Link to comment
Share on other sites

Jack: I think you did jquery folks a bit happier :-) great support! We will test the library next week with our application and in case it feels faster optionally include GSAP as the animating engine. the js files would be injected on the fly if needed. TweenLite.version 1.675 is the first one supporting the above? Also - is it backwards compatible? In the sense, that when it is already included in a page (we do not know this) but has version < 1.675 the already included should be overwritten by the version from our package. what is the smallest TweenLite.version one would have troubles with? Any bigger depreciations? Anyway thanks again, I will let you know how it goes.

Link to comment
Share on other sites

Yes, version 1.675 was the first one that has this "recognize eases by string names" feature, so it won't work at all in older ones (it'll just default to whatever TweenLite.defaultEase is which is normally Quad.easeOut).


I have more good news though...


We're ramping up to have GSAP serve as a standard in the banner ad industry (we hope) which means it is entirely possible that multiple ads will be on a single page and various versions of GSAP could be used between them (and the page itself). We just posted version 1.7 of TweenLite and TweenMax that has some enhanced functionality to make this easier.


By default, all the GSAP classes (TweenLite, TweenMax, CSSPlugin, the eases, etc.) are added to the window's scope. However, if you define a "GreenSockGlobals" object before you load the GreenSock Javascript files, the classes will be added to that object instead, making it easy to package things nicely however you please. For example, imagine a banner ad uses a newer version but the main site uses an older one. In that case, you could sandbox the banner one like:


<script type="text/javascript">
    var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever.
<script type="text/javascript" src="js/greensock/v1.7/TweenMax.js"></script>
<script type="text/javascript">
   window.GreenSockGlobals = null; //reset it back to null so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...)
<script type="text/javascript" src="js/greensock/v1.6/TweenMax.js"></script>
<script type="text/javascript">
   gs.TweenLite.to(...); //would use v1.7
   TweenLite.to(...); //would use v1.6


And of course if you wrap all your banner code in its own function, you could make things even easier by defining TweenLite and/or TweenMax (or any of the GreenSock classes) as local variables like this:


function runBanner() {
   var TweenLite = gs.TweenLite,
       TimelineLite = gs.TimelineLite,
       Strong = gs.Strong,
       Elastic = gs.Elastic;
   //now we can write the code like normal, without the "gs." prefix (or whatever name you used)
   TweenLite.to( $("#box"), 2, {css:{top:100}, ease:Elastic.easeOut});


There's nothing magic about the "gs" prefix either - I just randomly chose that. You can use whatever you want, like "banner".


In terms of other deprecations, no, I can't think of any. You should be good-to-go.


Let us know how things work for you. We'd love to see it in action.


Snag the latest files at http://www.greensock.com/gsap-js/ or if you're a Club GreenSock member, download the bonus zip from your account at https://www.greensock.com/account/ which has everything in there along with the bonus stuff.


Happy tweening!

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