Jump to content

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

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

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.

Share this post

Link to post
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

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.