Jump to content


What easings comes out of the box (yeah, of what box)?

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

One of the things that keeps bugging me about GSAP is the fact that I don't know what each 'Tween <Lite, Max ... etc >' is capable of out of the box. When do I have to add whatever random plugin to be able to do certain stuff.


Now, I was fiddling around with the easings of a TweenLite ... but no matter what I put it nothing really seemed to change. Then I though, »Well, maybe I can't even do that without some plugin?«.


Could I for instance just slam:


ease: RoughEase.ease.config({ template:
        strength: 1,
        points: 20,
        taper: "none",
        randomize: true,
        clamp: false
    y: -500


to the ease property of a TweenLite? If not, how would I know? Is there any place somewhere on this site – the docs maybe – where I can get a complete overview of what each 'package' it capable of out of the box, without any plugins? If not, then I'd suggest that feature to have.

Link to comment
Share on other sites

Hi, (edit: whoops, I thought the two posts were by the same person! sorry @determin1st and @blaasvaer!)


I'm not sure if this is what you're asking, but the included eases are detailed in the corresponding section in the docs: https://greensock.com/docs/Easing.


CustomEase requires an additional plugin; CustomBounce and CustomeWiggle require a plugin and to have a Club GreenSock membership.


Your RoughEase example is correct as far as I can tell, in fact it's the exact same as what's shown in the docs :) and the docs do use TweenLite.


Generally, the page for TweenMax in the docs – https://greensock.com/docs/TweenMax – start off by mentioning what the 'Max' variant adds, namely: 


many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), and more [as well as common extra plugins like] CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin as well as EasePack, TimelineLite, and TimelineMax.


  • Like 1
Link to comment
Share on other sites

Hi Blaasvaer,


I can understand that it can take some time understanding how all the tools work together and which ones are included where. This is why we put all of the "things you need most of the time" into TweenMax. To see what those things are we have this page:




Note it also lists methods exclusive to TweenMax that TweenLite doesn't have.


This page shows how TweenLite on its own is really only focused on animating numeric properties of JavaScript objects but it's power can be greatly extended through the use of CSSPlugin




The TweenLite docs go into more detail about which eases are included in TweenLite:




If you have suggestions about how we can make this stuff more clear, please let us know. We want to make it easy for everyone.




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