Import gsap as a module to three.js project fails

[antialias]

Hello,

I have a simple three.js project in which I am trying to install gsap as a module. 
I have:
-- gsap-bonus.tgz in the root
-- a node_modules folder with gsap
-- package.json with  "dependencies": {
    "gsap": "^3.6.1"}

=====
-- package-lock.json 

{
  "name": "hello_cube-210520",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "hello_cube-210520",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "gsap": "^3.6.1"
      }
    },
    "node_modules/gsap": {
      "version": "3.6.1",
      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.6.1.tgz",
      "integrity": "sha512-hCkjk7UVbeEmlpFbiy7lIsh742bwVlMhdCnnQ1CvVOAdURyPX8hXjFZGh/0YzUyAcWPyJPE0/paMhSYtLhGlfA=="
    }
  },
  "dependencies": {
    "gsap": {
      "version": "3.6.1",
      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.6.1.tgz",
      "integrity": "sha512-hCkjk7UVbeEmlpFbiy7lIsh742bwVlMhdCnnQ1CvVOAdURyPX8hXjFZGh/0YzUyAcWPyJPE0/paMhSYtLhGlfA=="
    }
  }
}
 =========

The three.js import works, gsap fails:

 

import {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from '../../../vendor/three/build/three.module.js';

import {gsap} from "gsap" ;

================

When I add <import {gsap} from "gsap" ;> I get "'gsap' is declared but its value is never read."
<import {gsap} from "./ gsap-bonus.tgz" ;> is greyed out in VSCode.

[OSUblake]

2 hours ago, antialias said:

When I add <import {gsap} from "gsap" ;> I get "'gsap' is declared but its value is never read."

 

Have you tried using it? That usually means you haven't done anything with it.

 

2 hours ago, antialias said:

<import {gsap} from "./ gsap-bonus.tgz" ;> is greyed out in VSCode.

 

You probably have .tgz files being ignored in your gitignore.

 

 

2 hours ago, antialias said:

package.json with  "dependencies": {
    "gsap": "^3.6.1"}

 

You probably didn't install the .tgz if you see that. You would see the version number if do a normal install via npm, which is fine, but it doesn't include the bonus files.

 

Be sure to go through all the installation docs...

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

 

And watch this video for help with npm.

 

 

 

[antialias]

Thanks for your prompt reply! Starting to use gsap in the file looks like the step I was missing.

When I've used gsap to animate three.js before everything was inside one big script:
http://instantplaces.ca/Desktop-200506-context-9.html
which all worked (with lots of scrolling).

Three.js is working now with modules which seems elegant-- geometry will be in a module like 'cube.js'
=====
import {
  BoxBufferGeometry,
  MathUtils,
  Mesh,
  MeshStandardMaterial,
} from '../../../vendor/three/build/three.module.js';

function createCube() {
  const geometry = new BoxBufferGeometry(2, 2, 2);
  const geometry2 = new BoxBufferGeometry(2, 3, 2);

  const material = new MeshStandardMaterial({ color: 'purple' });
  const material2 = new MeshStandardMaterial({ color: 'green' });

  const cube = new Mesh(geometry, material);
  const cube2 = new Mesh(geometry2, material2);
  cube.add(cube2);

  cube.position.x = -0.4;
  cube.position.y = -0.1;
  cube.position.z = 0.5;

 return cube;
}

export { createCube };
=====
which gets imported to a world.js for rendering.

 

This is not working in a gsap-test.js file in the same directory:

import {gsap} from "gsap" ;

import { createCube } from 'cube.js';

const cube = createCube()

 

gsap.to (cube, {duration: 3, x: -1.5} )

 

To use gsap in this system, do I need to make a module of gsap and import that to cube.js?
Or import cube.js into a gsap.js file and send that to the world.js for rendering?

[GreenSock]

1 hour ago, antialias said:

This is not working in a gsap-test.js file in the same directory:

import {gsap} from "gsap" ;

import { createCube } from 'cube.js';

const cube = createCube()

 

gsap.to (cube, {duration: 3, x: -1.5} )

 

To use gsap in this system, do I need to make a module of gsap and import that to cube.js?
Or import cube.js into a gsap.js file and send that to the world.js for rendering?

When you say that it doesn't work, is it silently failing or are you seeing error messages? 

 

You shouldn't need to create a separate module or anything like that. It sounds like you don't have GSAP installed properly or something, but it's very difficult to tell without a minimal demo. Can you create one? Like a super simple Github repo? (Please don't actually include the bonus GSAP files)