Webpack bundle only TweenLite

[raphaelkottakal]

Hi, I'm using: import { TweenLite } from 'gsap'; to load only TweenLite. But when using webpack-bundle-analyzer I found it's loading the entire TweenMax module(parsed size: 364kb). This is bloating up the final bundle js. Also tried using import TweenLite from 'gsap/TweenLite';(parsed size: 84kb) so the final bundle is smaller. But TweenLite is not working with that.

Need help on how to keep my final bundle small, as I'm not using all the features in TweenMax.

[jackdoyle]

"gsap" points to TweenMax, actually. That's why you're getting all that. You were correct in importing from "gsap/TweenLite" but the reason things may not be working is if perhaps you're trying to animate CSS-related values. That requires CSSPlugin (which is, of course, inside TweenMax). So you'd need to import CSSPlugin from "gsap/CSSPlugin". Does that clear things up?

[raphaelkottakal]

Hey Jack,

It works!! Thanks, you're awesome!

[inomdzhon]

Hi @jackdoyle,

Thank you for your powerful library! 😃

---

I have same issue with bundle size when I need import ScrollToPlugin and TweenMax together.

Ok, I can import all included in TweenMax separately. It's even better for me, because I don't use all pieces of TweenMax (example, roundProps and EasePack). And I can do like this:

import TweenLite from 'gsap/TweenLite'; 
import 'gsap/CSSPlugin'; 
import 'gsap/ScrollToPlugin'; 

But. May be I'll want use yoyo method, which pieces of TweenMax, then how I can import this? If I do this:

import TweenMax from 'gsap'; 
import 'gsap/ScrollToPlugin'; 

I'll have import TweenLite twice, because TweenMax default included it and ScrollToPlugin required it.

---

And optional questions:

1. why can't we to allocate features of TweenMax in separate module (like TweenLite) and create other module (example, gsap.js), which included all pieces: TimelineLite, TimelineMax, TweenLite, TweenMax, etc.
2. TweenMax could require all needed module. Why we concatenate?

---

Thanks.

[jackdoyle]

@inomdzhon Yeah, sorry about that. We're working on an ES6 version of the library for version 2.0.0, but that's probably a few months out at least. It's a lot of work :) But that should allow you to get more modular control of things (like imports). For now, you're right, there are certain situations in which you might get a redundant TweenLite in your bundle or something.

[inomdzhon]

@jackdoyle Sounds good! Looking forward to it)

[daviddelusenet]

I'm encountering the same problem. I'm doing this: import { TweenLite, TimelineLite } from 'gsap'

If I refactor that to this:

import TimelineLite from 'gsap/TimelineLite';
import TweenLite from 'gsap/TimelineLite';

My animations stop working. This is because in every component I use gsap I'm doing an import which breaks gsap.

Any idea on how to fix this?

EDIT

I now did the following: removed all gsap imports from my application. After that I added the following line to my App.js (root of my project): import 'gsap';. And this works since gsap is global.

However, in this setup TweenMax still gets imported. If I do this:

import 'gsap/TimelineLite';
import 'gsap/TweenLite';

My animations stop working. So how do I only import TimelineLite/TweenLite?

[jackdoyle]

@daviddelusenet tough to say without seeing a reduced test case, but we're working on a more ES6-friendly release of GSAP which you can preview here: https://greensock.com/temp/GSAP-ES6.zip (this link will only be valid for the next week or two). Does that work any better for you?

(Also notice that there's a new "gsap/all" that imports/exports all of the standard/public classes in case that's easier for you)

[inomdzhon]

@jackdoyle when the planned release about this?

[jackdoyle]

@inomdzhon Hopefully pretty soon, but we're looking for more feedback from the community and some key players first. Have you tested it in your environment? Does it work well for you?

[inomdzhon]

@jackdoyle I will check in soon 👍

[inomdzhon]

@jackdoyle I checked out.

Current release

Stats:

ES6-friendly release of GSAP

Really better stats:

But anyway problem stayed. I imported only lite versions of Tween and Timeline and Power1, Sine easing, but since we import all modules in gsap/index.js, I have all of them in bundle.

I removed TweenMax, TimelineMax and unnecessary Easing from gsap/index.js and decrease bundle size.

Stats after:

Plugin problem

And one more point. For using plugin, example, ScrollToPlugin we must import it like import { TweenLite, ScrollToPlugin } from 'gsap';, but it's mean it's unused variable. Maybe make more obviously method, example, TweenLite.setPlugin(ScrollToPlugin)? This applies to AttrPlugin, CSSPlugin and all global things.

[jackdoyle]

Thanks for the feedback!

index.js forces all those things into the bundle on purpose, to maintain backward compatibility for people who did something like:

import "gsap";

If your goal is to reduce the payload and enable maximum tree shaking, did you try either importing each thing directly or just use the "gsap/all" file?

import { TweenLite, TimelineLite, ScrollToPlugin, Power1, Sine } from "gsap/all"; 

or

import TweenLite from "gsap/TweenLite";
import TimelineLite from "gsap/TimelineLite";
...

[benjaminbours]

Hello, i had the same problem.

The GSAP-ES6 release solved it for me. Thank you jackdoyle 👍

[tonix-tuft]

Does import { TweenLite } from "gsap"; load the CSSPlugin for automatic vendor prefixing of styles?

Or should I import TweenMax with import { TweenMax } from "gsap"; to get CSSPlugin loaded automatically?

[OSUblake]

This is an old topic. You should do it like this.

import { gsap } from "gsap";

It includes the CSSPlugin. Please read the installation documentation and watch the npm video. https://greensock.com/docs/v3/Installation

[tonix-tuft]

@OSUblake Thank you for the feedback.

I have just seen the video. So, is this enough to automatically apply autoprefixing with CSSPlugin:

import { gsap } from "gsap";

gsap.set(element, {
    css: {
         x: 123,
         y: 456,
         scale: 1.2
    }
});

?

Thank you!

[jackdoyle]

@tonix-tuft you no longer need to wrap things in a "css:{}" object. GSAP 3 automatically figures that out for you. And yes, it'll discern if you're running a really old browser that needs a prefix for transforms and apply that for you. All you need to do is:

import { gsap } from "gsap";

gsap.set(element, {
  x: 123,
  y: 456,
  scale: 1.2
});

If you haven't checked out the "getting started" article, it's a great place to get a handle on the basics. https://greensock.com/get-started

If you have any other questions, the best place to go is https://greensock.com/forums - it's a fantastic community.

Happy tweening!

[tonix-tuft]

Thank you very much! I am new to gsap and will certainly take a look!