how to use gsap with Brunch.io ?

[odyright]

Hello there! What is the recommended guideline to work with brunch?

[jackdoyle]

Hm, sorry, but I'm not at all familiar with brunch. Hadn't heard of it until today, but I imagine it's like most other build tools in terms of just being able to import things, like writing ES6, right? For example,

import {TweenMax, Power1, TimelineMax} from "gsap";

or

import ScrollToPlugin from "gsap/ScrollToPlugin";

Right? I imagine it's NPM-based. Were you having a particular problem? Perhaps it'd make more sense to ask the brunch.io folks how to use GSAP(?)

[odyright]

@jackdoyle thank you and yes brunch.io is like webpack, rollup. And when trying to compile the code, I got:

Compiling 1 file (.ex)
23:55:07 - error: Processing of js/jquery.themepunch.tools.min.js failed. Error: Could not load module '../TweenLite.js' from '/Users/odylight/codes/ins_umbrella/apps/ins_web/assets/js'. Make sure the file actually exists.

[jackdoyle]

I'm not quite sure what to tell you - perhaps the themepunch file is pointing to something incorrectly? That's not our file. This doesn't sound like a GSAP issue. Also, please make sure you're using the latest version of GSAP (1.20.2 right now). Maybe reach out to the themepunch author?

[OSUblake]

brunch works fine with GSAP. I would recommend using a skeleton that includes Babel so you can import NPM modules just like Jack showed above. However, it looks like something is wrong with your themepunch file, so you need to work that out first.

[dipscom]

Hello! Just to echo Blake's words, Brunch and GSAP play fine together, there's no secret to it, it all depends on your setup.

Can't be certain what your issue is because I have no idea what the folder structure is but my wild guess is here is as the error says, the file is not where it is looking for.

js/jquery.themepunch.tools.min.js is looking for TweenLite in js/TweenLite.js and I don't think it is there. Even if it is, Brunch will wrap everything inside your js folder into CommonJS Modules which might be causing it to get lost. I had a ton of headache initially until that sunk in when I was trying to get the plugins to play ball. Dropping the plugins into a vendor folder stopped my issue.

Have you gone over Brunch's long guide? There's a section explaining about the folders and what gets turned into what.

As for your original question: The guideline I would recommend is to use GSAP's CDN for the main file and plugins and drop any premium plugin into the vendor folder. Works like a charm.

:)

[odyright]

thank you for your reply and sorry for my lonnnnnnnng delay, it works fine!

[jackdoyle]

No problem, @odyright. Thanks for letting us know it works.