Jump to content
GreenSock

ochalmers

Adding plugins

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

Hey guys,

 

Sorry if this has been touched on, i'm sure it has but I couldn't find a topic about it.

 

I am rocking tweenmax, which I must say is incredible. As someone who is pretty decent in JS and has been animating between CSS and JS previously.. it really is a godsend. My question to you good folk, is in regards to adding the various plugins. How do I go about adding, say the CSS plugin to my page / scripts? Do I simply link to it as you would the tweenmax js file? 

Sorry again, this is a pretty daft question and i'm sure will be easily answered!

Thanks

Oliver

Link to comment
Share on other sites

Hello ochalmers, and Welcome to the GreenSock Forums!

 

You can include like so, notice the order of script tags:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<!-- HTML CONTENT GOES HERE -->

<!-- SCRIPTS GOES HERE OR IN HEAD -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/plugins/CSSPlugin.min.js"></script>

</body>
</html>

Or you can use TweenMax for convenience which includes all the goodies like TweenLite, CSSPlugin, EasingPlugin, TimelineLite, and TimelineMax.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<!-- HTML CONTENT GOES HERE -->

<!-- SCRIPTS GOES HERE OR IN HEAD -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>

</body>
</html>

You can grab the different GSAP scripts, if you scroll up and click the get GSAP link in the left sidebar on the top.

 

I hope this helps :)

  • Like 2
Link to comment
Share on other sites

Thanks alot Jonathan, this is just what I was looking for.

 

Best,

Oliver

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