Jump to content
Search Community

What plugins do I need to activate to ... ?

NubieHere 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

I can't seem to find any information on what plugins I need to activate for doing specific things with TweenLite.


Could someone point me to where (as I assume it exists somewhere) the matrix for features and the needed plugins are?


I'll give you an example:


I wan't to animate, let's say the »top« property, then the matrix tells me; »Oh, then you need to enable the CSSPlugin; and by the way here's how you do that (so you don't have to spend hours and hours googling this stuff ...)«!


And what plugin do I need to activate for easing?



Link to comment
Share on other sites

Hi blaasvaer :)


Welcome to the GreenSock forum.


TweenLite with the CSSPlugin and EasePack should take care of most of the typical things you want to do. I'd highly recommend using the CDN and choosing TweenMax. It's used on a whole lot of websites so you'll get the benefit of caching. It loads several plugins automatically. TweenMax includes:


  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack

Here's the link for TweenMax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

As far as other additional plugins - they all have semantic names. Wanna drag something? You need Draggable. Morph something? MorphSVG etc.


Check out the products page for more details:



Happy tweening.


  • Like 3
Link to comment
Share on other sites

Yep, Craig is exactly right. Basically, TweenLite (the core) can animate any numeric property of any JavaScript object without needing any plugins. But some things require special handling like CSS properties that are put onto the "style" object of the element. And to get the current value, it's not as simple as element.style.property - you've got to getComputedStyle(). That's why plugins exist - to layer functionality on top of the core capabilities. 


So yeah, by far the most popular plugin on the web would be CSSPlugin (which is included INSIDE of TweenMax too, by the way). If you find yourself needing some other capability (morphing, drawing a line, directional rotation, etc.), that's where the plugins come in. 


Does that answer your question? 

  • Like 2
Link to comment
Share on other sites

I haven't used GSAP in a loooong time. So it was simply the annoyance of having to do a lot of searching (googling that is) ... to actually get things working. All instructional videos seem to be about TweenMax, but if size is a concern one maybe wish to use TweenLite. But figuring out the limitations of this just seem hard to find. So some information on what TweenLite can and especially cannot do out of the box ...


Still think a matrix would be great ... : )

Link to comment
Share on other sites

Hello blaasvaer, welcome to the GreenSock Forums!


In the top of the page if you click on Support => Docs .. page redirects to GSAP Docs page


Then you will see the first 2 line items of GSAP with the heading "Our most popular tools" ..  TweenLite and TweenMax


In the TweenLite docs page under Usage. The first sentence advises to look at the GSAP Jump Start Tour link for interactive learning




To get up and running quickly, check out the Jump Start tour which covers the basics in a fun, interactive way.


If you look at that page you will see various examples along with source code you can look at to see what GSAP files are included for what example you are viewing.


In the TweenMax docs page you will see in the first paragraph of the docs it states the differences between TweenLite and TweenMax:


TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), and more. It also includes many extra plugins by default, making it extremely full-featured. Any of the plugins can work with TweenLite too, but TweenMax saves you the step of loading the common ones like CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin as well as EasePack, TimelineLite, and TimelineMax. Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. The syntax is identical. You can mix and match TweenLite and TweenMax in your project as you please, but if file size is a concern it is best to stick with TweenLite unless you need a particular TweenMax-only feature.


I hope this is useful.. also the GreenSockLearning YouTube channel is also great if you like to learn visually




As well as the GreenSock Blog page:




Happy Tweening! :)

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