GSAP and eleventy.js

[JamesGrubb]

Hello, sorry no visuals for this question. Im trying to setup Gsap with eleventy.js a static site generator. I would like to use module imports, but should I be using the CDN instead? Also If I use the CDN and and my index.html links to a main.js file how do I reference gsap inside of the main.js file. I  realise these are general javascript questions so appologies.

[elegantseagulls]

Hi James,

I'm not familiar with eleventy, but I assume if you wanted to use module imports it should be just fine... The trick for static sites, you'll generally want to import GSAP's plugins from umd (import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';). If you use the CND, which should work very well, as well, you'll write gsap, as gsap... you may need to create an exception/reference somewhere (likely your linter exception list) so that your env/linter knows about it.

[Dipscom]

If I understood Eleventy's proposition correctly, I would suggest using the CDN. There is no need to bundle GSAP with you JS bundle. You can have it cached in the user's browser and all the goodies that come with it.

 

If you end up using the CDN, you don't need to do much from the JavaScript point of view other than make sure it is loaded before your main.js file. And you'll have to tell you code editor knows you're referencing an external library not present in your environment, just like the Seaguls so elegantly put.

[JamesGrubb]

Hi Thank you for your replies. I have not come across exception/reference before. I ha a wild stab in the dark writing a jsconfig.json file and including the following code:
 

"typeAcquisition": {

"include": [

"gsap"

]

}

[GreenSock]

2 hours ago, elegantseagulls said:

you'll generally want to import GSAP's plugins from umd (import { ScrollTrigger } from 'gsap/umd/ScrollTrigger';).

Just for the record, I think @elegantseagulls meant /dist/ instead of /umd/

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

Which gets you the ES5 UMD file (highly compatible). 

[JamesGrubb]

Thanks. Im only just getting my head around static file generators. Hows your knowledge? As I can fathom a common practice is to serve files and folders from a 'build' or 'public' or 'dist' folder. Should I copy the entire gsap node_module to the dist folder (for example) so I can reference it with 

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

[JamesGrubb]

...but I will want to minify the javascript before build?

[GreenSock]

6 minutes ago, JamesGrubb said:

Im only just getting my head around static file generators. Hows your knowledge?

I'm the wrong guy to ask. I have almost zero experience, sorry. Maybe someone else will chime in, or perhaps this is the wrong kind of forum to ask this kind of question. We're pretty focused on GSAP-specific questions around here

 

Like @Dipscom said, you could probably just use the CDN link(s) because those are already minified and give you the benefit of being widely cached. 

[JamesGrubb]

Yeah let's leave it at that. Thanks so much for your time anyway.

[elegantseagulls]

36 minutes ago, GreenSock said:

Just for the record, I think @elegantseagulls meant /dist/ instead of /umd/

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

Which gets you the ES5 UMD file (highly compatible). 

Yep. Hadn't had my morning coffee. Post is updated.

[elegantseagulls]

26 minutes ago, JamesGrubb said:

Should I copy the entire gsap node_module to the dist folder (for example)

Nope. The dist folder is already in the node_module dir for gsap, so no need (moving your files out of node_modules would basically defeat the purpose of installing them that way).

[Dipscom]

On 8/21/2020 at 5:53 PM, JamesGrubb said:

Thanks. Im only just getting my head around static file generators. Hows your knowledge? As I can fathom a common practice is to serve files and folders from a 'build' or 'public' or 'dist' folder. Should I copy the entire gsap node_module to the dist folder (for example) so I can reference it with 

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

As with everything in life, it depends. With the exception of copying the gsap folder from node_modules, as explained ealier by an entire flock of smartly dressed seagulls, serving files and folders from a 'build', 'public' folder comes down to your needs and if those assets already exist somewhere else. There are arguments in favor and against for both approaches. You'll be better off understanding why you would want to use one over the other and when to do so.

 

For GSAP itself, the non-club plugins, there's minimal advantage to include them in your bundle. So, slap that CDN link on your project and code away happly.