Size of TweenLight is large

[wpitallo]

Hi, so I am evaluating GSAP vs @tweenjs for basic tweening.

I am importing TweenLight like so:

import { TweenLite } from 'gsap/all'

and @tweenjs like so:

import TWEEN from '@tweenjs/tween.js'

They are both performing very similarly in my tests, however one clear and major advantage in our case is that @tweenjs has a much smaller footprint. (and this is very important for us).

Have a look at the webpack bundle analysis:

gsap (TweenLight)

@tweenjs

As you can see @tweenjs is a lot smaller.

My question: is there a way to reduce the bundle size for TweenLight / gsap. Or is this as small as it will ever get?

Thanks so much for the help.

:)

[ZachSaucier]

Hey wpitallo. What's your use case for your animations? Will you be animating DOM elements? Canvas? SVG? Something else?

Also, why is file size so important for your use case? Are you able to use a CDN?

Note that the Lite/Max flavors of GSAP were removed in GSAP 3. So if you're loading that from GSAP 3 then you're getting the entire GSAP core.

[wpitallo]

Hi @ZachSaucier,

Will be used for Canvas.

We are using it for games. We do already use a CDN and also have private CDN in areas where latency is high.

Yes I see that the entire GSAP core is being bundled. Is there no way just to bundle just TweenLight?

[ZachSaucier]

Keep in mind that people use EaselJS along with TweenJS for animating canvas (so you'd be adding that to the file size if you use it).

As I said, there is no Lite/Max in GSAP 3. However, you should be able to load a custom build of GSAP without the CSSPlugin (which takes up a fair bit of size) since you're just animating canvas. @jackdoyle or @OSUblake do you have more info regarding that topic? Or dropping out other parts of GSAP?

If you can use a public CDN to load GSAP then the file size is much less of an issue (because since GSAP is used so commonly most versions are cached, making the file size irrelevant). For example many (if not all) ad networks don't count GSAP against the file size of ads because they all use CDN versions.

[wpitallo]

Thanks @ZachSaucier would be great to see what is come to without the CSSPlugin. In our case we are not to worried about the "size of the ads" we are more concerned with load performance. In some countries they are still using slow 3G connections so we aim to keep our bundles as small as possible.

[OSUblake]

Keep in mind that people use EaselJS along with TweenJS for animating canvas (so you'd be adding that to the file size if you use it).

I think he's talking about tween.js, which is a different library. It's a very bare bones tweening library.

If you are only doing canvas animations, then all you need is the core. That will be the smallest build possible. TweenLite is just an alias. You should use gsap.

import { gsap } from "gsap/gsap-core";

// tween
gsap.to(a, { x: 100, ease: "none" });

// timeline
gsap.timeline()
  .to(b, { y: 100, ease: "power1" })
  .to(c, { y: 100, ease: "power1" });

[jackdoyle]

Yep, @OSUblake is exactly right (as usual).

And to be clear, GSAP delivers waaaaay more functionality than tween.js which is why the file size is bigger. It's a full-fledged, robust animation engine that makes it simple to do complex sequencing and control things in an object-oriented way, it has all kinds of easing options and useful utility methods, etc., etc.

https://greensock.com/why-gsap

Happy tweening!

[wpitallo]

Thanks for the help everyone appreciate it!