Confused about import / require

[scatterbrainz]

Hey Everyone,

 

I have 2 pseudo mini-projects. #1. is a demo run for #2. So I read over the documentation. IN a brand new folder via for a project - You do...

npn init.

npm i -g gsap

 

then i launch vs code via the CLI cmd -> code . (vs code).

 

So when I go to write the demo.js

 

import TweenMax from "gsap/TweenMax";

 

It flags n' fails. making the methods within unusable.

@Shaun Gorneau > was awesome about providing a demo for my snaking letters, in his example it looks as if jQuery has been employed.

>>> https://codepen.io/sgorneau/pen/dLOpKx

What makes this perhaps more challenging is that my intention is to make the DOM elements dynamically.

Which exactly what it should do. The only thing I'm lost on, is how to bundle it all into a french vanilla (LOL - my nickname) JS app.

its a minified demo run in plain JS, because there's actually FOUR (4) letter snakes all going into the middle box, with pulsing DOTs as they enter. (The Dots can simply be a CSS function with alternating opacity.

 

To elaborate on what the original question: that @Shaun Gorneau was very helpful with ... here's further ... and a pen ... I may have this COMPLETELY wrong...

 

here's a pen, I started if its useful ...

See the Pen LvWjjm by scatterbrainz (@scatterbrainz) on CodePen

(the pen is NON-functional) probably because the pen reads css before the JS.

 

Phase #2.

 

Port over this entire mini-demo into a REACT build. SO when I run the npm build cmd from the CLI all the dependencies are self contained -> perhaps I'm missing how websites function and pull in dependencies for things to run.

 

Any guidance here would be great.

 

Best Wishes...

 

scatterbrainz (at the best of times - LOL)

 

 

See the Pen dLOpKx by sgorneau (@sgorneau) on CodePen

[GreenSock]

3 hours ago, scatterbrainz said:

It flags n' fails. making the methods within unusable.

 

Not quite sure what you mean. An error message would be helpful. 

 

3 hours ago, scatterbrainz said:

(the pen is NON-functional) probably because the pen reads css before the JS.

 

There are several problems I noticed off the bat:

1. You're trying to attach an onload to the document instead of the document.body.
2. You're assigning the RESULTS of a function call as the onload instead of the actual function. BAD: document.onload = yourFunction(). GOOD: document.body.onload = yourFunction; Notice there's no "()" on the end of the function. When you put "()" at the end, that calls the function immediately. 
3. You're creating a textNode and then trying to append a child node to that which is impossible.
4. You didn't load GSAP.

 

If you have any GSAP-specific questions, we'd love to help. 

 

Good luck with the project