Jump to content
GreenSock

Eugene Rayner

Script loading

Go to solution Solved by PointC,

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 there!

I had a quick question about loading scripts for GSAP.

 

I find myself loading lots of scripts and I feel like I will be losing out on a lot of speed for my website.

 

        <script src="js/jquery-3.1.1.js" type="text/javascript"></script>
        <script src="js/ScrollMagic.js" type="text/javascript"></script>
        <script src="js/TweenMax.js" type="text/javascript"></script>
        <script src="js/plugins/animation.gsap.js" type="text/javascript"></script>
        <script src="js/plugins/debug.addIndicators.js" type="text/javascript"></script>
        <script src="js/DrawSVGPlugin.js"></script>
        <script src="js/TimelineMax.js"></script>
        <script src="svg_js.js" type="text/javascript"></script>
 
is there something I am missing? ie, a way of not using so many?
 
Cheers
Link to comment
Share on other sites

  • Solution

Hi erayner_45092  :)

 

I'd recommend a CDN whenever possible so you'll get the benefit of caching. You can load jQuery, GSAP and ScrollMagic via a CDN. Here are some links:

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

//ScrollMagic
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> 

//jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

Loading TimelineMax is redundant as it's included with TweenMax. The following are included with TweenMax:

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

DrawSVG is a Club plugin so there is no CDN. You'll have to load that one yourself, but I'd recommend the minified version.

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Awesome, thanks a bunch.

 

Just thought id ask here too - because I found a soluition to gsap not working in another forum..

 

What is the point in animation.gsap.js?

 

Thanks again,

Eugene

  • Like 1
Link to comment
Share on other sites

That is necessary if you're using ScrollMagic and you want it to have control over your tweens. It's not immediately apparent why you need it, but without it all the tweens will just start playing before you scroll.

 

You'll also want to make certain you load it after TweenMax. We had a recent post about problems and that was the issue. The animation.gsap.js file won't work correctly if you load it before TweenMax.

 

Here's a link to the docs.

 

http://scrollmagic.io/docs/animation.GSAP.html

 

Happy tweening.

:)

  • Like 1
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.
×