How to use GSAP in the typescript project of layabox ?

[NaughtyDog]

How to use GSAP in the typescript project of layabox ?
layabox is an HTML5 engine.  https://www.layabox.com/?language=en

[ZachSaucier]

Hey NaughtyDog. Welcome to the GreenSock forums!

 

Can you please provide a basic demo of GSAP not working with layabox? Maybe using something like CodeSandbox or StackBlitz? 

 

If all you need are the Typescript declarations for GSAP 3, you can get those by downloading the ZIP file from the GreenSock website. Do note that we're still working on the Typescript declarations.

[NaughtyDog]

I imported the class library under the umd folder in gsap-member.zip into the TypeScript project in Layabox, compiled it and ran it successfully.

But if I import the class libraries in the esm folder into the TypeScript project, or if I import the class libraries in the src folder into the TypeScript project, Either of these two ways, the following error occurs after compiling the run.

[GreenSock]

It looks like your build system isn't set up to understand ES modules, that's all. It's unrelated to GSAP. If the UMD files work, you're welcome to just use those. They're exactly the same thing, just formatted differently for situations exactly like this.  Is there some reason you don't want to use the UMD files?

[NaughtyDog]

I'm just trying to figure out what the problem is, and how to go about fixing it.
I got the following response from the official Layabox.
The engine is ES6 enabled and automatically handles the import and export of src code at compile time.
However, there have been issues with the browser's support for imports and exports, so we don't recommend developers use it outside of the user folder (i.e. SRC).
For browser support, see MDN.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

I loaded the GSAP class library in the index.js file and then embedded index.js in the index.html file. in the MDN instructions, it explicitly says that the export statement cannot be used in the embed script.

 

I'm trying other methods that will allow me to successfully reference the GSAP class library in the SRC folder. Do you have any good ideas?
Please forgive my stubbornness, and in any case, thank you for taking the time out of your busy schedule to respond to me. Thank you!

[ZachSaucier]

7 hours ago, NaughtyDog said:

we don't recommend developers use it outside of the user folder (i.e. SRC).

Sounds like you should just load the CDN version of GSAP: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js

[OSUblake]

7 hours ago, NaughtyDog said:

 

 

There's no way what you have would ever work. You can't dynamically load es modules like that.

 

Just use cdn scripts like Zach mentioned.

https://cdnjs.com/libraries/gsap

 

Or use the umd versions.

 

[OSUblake]

9 hours ago, NaughtyDog said:

However, there have been issues with the browser's support for imports and exports, so we don't recommend developers use it outside of the user folder (i.e. SRC).

 

The way that sounds is that you can only use modules for files inside the src folder. For modules, you need to install it just like on the docs.

https://greensock.com/docs/v3/Installation

 

And then import gsap in every file you use it.

import { gsap } from "gsap";