Jump to content
GreenSock

mhc

Is there an issue with the TimelineMax library.

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 All,

 

The following (attached codepen URL) doesn't work. The only way it works is if I use the TweenMax library. I cannot use that, because the file size is too large(108kb vs 20kb for TimelineMax).
 

<div class="token"></div>

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

 var tl = new TimelineMax(); // TimelineMax fires an error.

 tl.to(".token",1,{x:100,alpha:0});

</script>

The above script fires an "Uncaught ReferenceError: TimelineMax is not defined". error 

 

Very simple code. Why is timelineMax not working? I've tried downloading the library and running this same code locally too, which is what i would like to do in the final build. No luck.

 

Any help would be much appreciated.

Thanks.

See the Pen mEGERb?editors=1111 by viewtifulmoejoe (@viewtifulmoejoe) on CodePen

Link to comment
Share on other sites

Hey All,

 

The following (attached codepen URL) doesn't work. The only way it works is if I use the TweenMax library. I cannot use that, because the file size is too large(108kb vs 20kb for TimelineMax).

 

<div class="token"></div>

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

 var tl = new TimelineMax(); // TimelineMax fires an error.

 tl.to(".token",1,{x:100,alpha:0});

</script>

The above script fires an "Uncaught ReferenceError: TimelineMax is not defined". error 

 

Very simple code. Why is timelineMax not working? I've tried downloading the library and running this same code locally too, which is what i would like to do in the final build. No luck.

 

Any help would be much appreciated.

Thanks.

For your animation to work using TimelineMax or TimelineLite, you also need to include TweenLite and CSSPlugin.  If you want to add eases, you would also need EasePack.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
  • Like 4
Link to comment
Share on other sites

By the way, is this for a banner?  Most ad serving companies these days won't count the file size of CDN links against your banner, because they get cached and don't have to be loaded multiple times.  Check out this blog post for more information: http://greensock.com/kilobyte-conundrum/

 

Google and Sizmek even host their own copies of Greensock that you can use for banners.

 

Or if you're not working on banners, I really wouldn't worry about the file size of the library & would just use TweenMax.  It loads pretty much instantly.

  • Like 3
Link to comment
Share on other sites

Yep, ohem got it exactly right. TweenLite is essential for all of GSAP (TweenLite is included inside of TweenMax). It would be a little bit like loading a jQuery plugin and expecting it to work without ever loading jQuery. Sorry if that was unclear in the docs or videos on our site. You pretty much have to load either TweenLite or TweenMax, and then whatever else you want/need.

 

As ohem pointed out, you might just want to load TweenMax because even though it is a bit larger overall, when you factor in all the caching out there and the fact that you get all those goodies in one file (including the timeline classes and CSSPlugin), the real-world performance difference probably isn't even noticeable. This might be worth reading (even if you're not using it for banner ads): http://greensock.com/kilobyte-conundrum/

 

Oh, and TweenMax isn't 108kb. I assume you were looking at the non-gzipped size, right? Almost all servers gzip things, so TweenMax is actually closer to 35kb. Very reasonable these days. And on every major ad network, it's almost always free (doesn't count against your file size).

 

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