Jump to content
Search Community

How to locally install GSAP and Plugins from Zip

GregWilliamBryant 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

Hello All,

 

This probably sounds like a silly question, but searching on google and on this site, I can't find a basic how to - when it comes to adding the script files and installing/setting up locally.

 

I've downloaded greensock-js-with-customease and I'm concluding if move the entire minfied folder structure to my Javascript directory and include the following two files. 

 

<script src="js/TweenMax.min.js"></script>
<script src="js/TimelineMax.min.js"></script>

But I can't find a conclusive answer.   The getting started guide just refers to using  CDN or downloading the zip:

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

I am guessing that TweenLite.min.js is the a la carte version, but then how to pick and choose plugins?

 

Also in the minified folder there is a jquery.min.js and jquery.gsap.min.js, both these files look very similar, what is difference use?   I'm concluding that they are JQuery Hooks to override animation behaviour?  But what I don't understand is why there is jquery.gsap.js uncompressed, but not jquery.min.js uncompressed?

 

Could someone point me to appropriate page in the documentation which explains the folder structure / usage of the download.  Or if not otherwise summarise here?

 

The Full folder zip I've attached below.

 

Thank you

 

greensock-js-with-customease\greensock-js-with-customease
greensock-js-with-customease\__MACOSX
greensock-js-with-customease\greensock-js-with-customease\docs.html
greensock-js-with-customease\greensock-js-with-customease\getting_started.html
greensock-js-with-customease\greensock-js-with-customease\src
greensock-js-with-customease\greensock-js-with-customease\src\bonus-files-for-npm-users
greensock-js-with-customease\greensock-js-with-customease\src\esm
greensock-js-with-customease\greensock-js-with-customease\src\minified
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed
greensock-js-with-customease\greensock-js-with-customease\src\bonus-files-for-npm-users\CustomEase.js
greensock-js-with-customease\greensock-js-with-customease\src\bonus-files-for-npm-users\umd
greensock-js-with-customease\greensock-js-with-customease\src\bonus-files-for-npm-users\umd\CustomEase.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\all.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\AttrPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\BezierPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\ColorPropsPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\CSSPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\CSSRulePlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\DirectionalRotationPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\Draggable.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\EaselPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\EasePack.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\EndArrayPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\index.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\ModifiersPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\package.json
greensock-js-with-customease\greensock-js-with-customease\src\esm\PixiPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\RoundPropsPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\ScrollToPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\TEMPLATE_Plugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\TextPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\TimelineLite.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\TimelineMax.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\TweenLite.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\TweenMax.js
greensock-js-with-customease\greensock-js-with-customease\src\esm\TweenMaxBase.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\easing
greensock-js-with-customease\greensock-js-with-customease\src\minified\jquery.gsap.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\jquery.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins
greensock-js-with-customease\greensock-js-with-customease\src\minified\TimelineLite.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\TimelineMax.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\TweenLite.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\TweenMax.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\utils
greensock-js-with-customease\greensock-js-with-customease\src\minified\easing\CustomEase.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\easing\EasePack.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\AttrPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\BezierPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\ColorPropsPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\CSSPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\CSSRulePlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\DirectionalRotationPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\EaselPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\EndArrayPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\ModifiersPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\PixiPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\RaphaelPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\RoundPropsPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\ScrollToPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\plugins\TextPlugin.min.js
greensock-js-with-customease\greensock-js-with-customease\src\minified\utils\Draggable.min.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\easing
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\jquery.gsap.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\TimelineLite.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\TimelineMax.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\TweenLite.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\TweenMax.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\utils
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\easing\CustomEase.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\easing\EasePack.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\AttrPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\BezierPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\ColorPropsPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\CSSPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\CSSRulePlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\DirectionalRotationPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\EaselPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\EndArrayPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\ModifiersPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\PixiPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\RaphaelPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\RoundPropsPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\ScrollToPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\TEMPLATE_Plugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\plugins\TextPlugin.js
greensock-js-with-customease\greensock-js-with-customease\src\uncompressed\utils\Draggable.js
greensock-js-with-customease\__MACOSX\._greensock-js-with-customease
greensock-js-with-customease\__MACOSX\greensock-js-with-customease
greensock-js-with-customease\__MACOSX\greensock-js-with-customease\._docs.html
greensock-js-with-customease\__MACOSX\greensock-js-with-customease\._getting_started.html
greensock-js-with-customease\__MACOSX\greensock-js-with-customease\._src
greensock-js-with-customease\__MACOSX\greensock-js-with-customease\src
greensock-js-with-customease\__MACOSX\greensock-js-with-customease\src\esm
greensock-js-with-customease\__MACOSX\greensock-js-with-customease\src\esm\._package.json

 

Edited by GregWilliamBryant
Topic Edit to be clearer
Link to comment
Share on other sites

9 hours ago, GregWilliamBryant said:

wnloaded greensock-js-with-customease and I'm concluding if move the entire minfied folder structure to my Javascript directory and include the following two files. 


<script src="js/TweenMax.min.js"></script>
<script src="js/TimelineMax.min.js"></script>

But I can't find a conclusive answer.   The getting started guide just refers to using  CDN or downloading the zip:


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

I am guessing that TweenLite.min.js is the a la carte version, but then how to pick and choose plugins?

Welcome aboard!

 

I think this will help you conceptualize things pretty well: 

See the Pen djXzyR by GreenSock (@GreenSock) on CodePen

 

TweenMax already has TimelineMax INSIDE of it, so there's no need to load them both. In most cases, TweenMax is all you need. If you need some extra special sauce to do a particular effect, you may need to load one of the other plugins. 

 

9 hours ago, GregWilliamBryant said:

Also in the minified folder there is a jquery.min.js and jquery.gsap.min.js, both these files look very similar, what is difference use?   I'm concluding that they are JQuery Hooks to override animation behaviour?  But what I don't understand is why there is jquery.gsap.js uncompressed, but not jquery.min.js uncompressed?

The ".min" in the file name just means that it's a minified file. We include all the uncompressed files as well as the minified versions, just so you have options. You'd never used an uncompressed file on your actual live site - always go with the minified one. But sometimes it's nice to read the uncompressed source code or load it locally just for debugging. 

 

I really wouldn't recommend using the jquery plugin unless you have legacy jQuery.animate() code that you just want to give a speed boost. Otherwise, dump that and use GSAP to animate everything. 

 

If you're just looking to load stuff into a web page and get going fast, the /minified/ folder has all that you need. 

 

Does that help? 

 

Happy tweening!

 

  • Like 1
Link to comment
Share on other sites

Yes Thank you - 

 

Although if I choose to use it a more modular nature, do I do the following?

<script src="js/TweenLite.min.js"></script>
<script src="easing/CustomEase.min.js"></script>
<script src="plugins/CSSPlugin.min.js"></script>

 

Also - Back to Jquery - What the difference between these two files?

\src\minified\jquery.gsap.min.js
\src\minified\jquery.min.js

And on the uncompressed side, there is not a uncompressed version of \jquery.min.js?

src\uncompressed\jquery.gsap.js

 

Sorry - I know it probably obvious - I just can't work out why there is inconsistency between compressed /uncompressed folders.  Or hot to include stuff in modular nature.

 

Link to comment
Share on other sites

10 hours ago, GregWilliamBryant said:

Although if I choose to use it a more modular nature, do I do the following?


<script src="js/TweenLite.min.js"></script>
<script src="easing/CustomEase.min.js"></script>
<script src="plugins/CSSPlugin.min.js"></script>

 

Yep, exactly. Maybe check out the "getting started" article

 

As for that jquery.min.js file, that's pretty weird - you can ignore that altogether. It looks like an old minified file (with the wrong name). Sorry about any confusion there. 

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

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