Contradictory Information - Very CONFUSED!

[scatterbrainz]

Hey Everyone, 

 

I've made a few posts about trying to utilize GSAP methods for some simply animations. Shaun Gorneau has been great about supporting methods usage in a javascript file. That's grand. 

 

Also got feedback about how I was setting up a file from another moderator - that was great too. 

 

But I AM still BANGING my head trying to get this to be accessible. 

 

So here's my steps.....lets see if we can resolve this. 

terminal window: (OSX)

> mkdir demo

>npm install 

>npm init -y

>npm l -g gsap

 

I get the a node_modules folder with GSAP files in it.  There's no reference to GSAP in the package.json, but there is in the package-lock.json. 

 

When I utilize the line of code (found on your website)  -> I get the following error 

if I try to change it and give it a direct path rooting -> './node_modules/gsap' -> i get another error 

 

last a poster -> OSUBlake -> posted DO NOT INSTALL FROM NPM.  But in the documentation it says to do exactly that SO .....???????

 

 

 

 

[Dipscom]

Hey Scatterbrainz!

 

You know the answer is the classic: 'It depends...", right?

 

Sorry about it being confused and information being contradictory. There are some reasons. One is that there is no official line. The original way of including GSAP was via a CDN and, a CDN is actually a very good starting point if you have a library that is very common and widely used because it gets cached in people's browsers and you no longer need to download it.

 

But then, bundling systems have appeared. People started showing up here trying to import GSAP into their projects. It got so common having to explain how to bundle it up with a build system that the guidance in the docs on 'how to use with npm' was created.

 

Back to 'it depends'. It depends on what you want to achieve. If all you are after is writing posts and tutorials on how to create animations using GSAP, try to have as little steps as possible until the student gets to the animation phase. In my personal view, that would be to use the CDN and a link on the Scripts tag. Less stuff to faff around with. One link and you're ready to roll. No config files, no package.json, not tree-shaking issues.

 

But, if you are trying to teach people how to use GSAP in a bundle system (for whatever reason people think it should be done), then, you will need to understand the advantages of that pattern, how the bundle system work, how it is mangling GSAP (or not) and then, come up with the solutions to make it work. OSUBlake is very knowledgeable, I will defer to his opinion in the vast majority of times as he really know his stuff. But he is not perfect and others have different viewpoints.

 

Finnaly, it all this that I wrote has nothing to do with your question, then, help me out as I seem to have not understood what you were asking.

[scatterbrainz]

GSAP - NPM - INSTALL - instructions ->  @Dipscom Thank for the response. It does and it doesn't - how's that for an answer - LOLOL.  So I'm creating an introduction page (animation of maybe 15 seconds in total length maybe 5 or 10). For my own website (I'm a freelance web design/developer). Basically because i'm totally fresh - and new - I generally like to learn things TWICE, but sometimes its three way. The first demo run is with french vanilla js (my nickname for plain js). 1 project folder / 1 js file / 1 html /1 css. Then i flip that to a REACT APPT.  I modify the JS so that it becomes component driven and easy used by REACT. REACT too my knowledge doesn't utilize external resources (althought it might be able to). Since react you would run an NPM BUILD on the folder, so that ONLY the needed dependencies are bundled. That is why I'm trying to demo it with installed dependencies, so I can see how it all relates when I do the react built. - I've already shaken the tree.  I couldn't add the screen shot - max limit for posting images hit. So that's why you don't see it, but I followed the principals on the npm doc's. Does this information help?  Also please understand - I don't do the blame game. He said She said - blah blah blah. My only point in making the reference is saying I have a info A and info B. Are both truth? or both false? If one holds true given environment & criteria group 1 and info B holds true given environment and criteria group 1, that's great, so long it as that's clear.  For me its just about complete information. (Its like when I was learning JS /jQuery at first - one educator said to use eventListerner's to flip page as a re-direct. Another said you never use an eventlistener that way you use an <a> tag. Its not consideration/concern to me whether one is right and one is wrong, rather, more critically - WHEN TO USE WHAT - for convention/best practices / original intended use / modified use / extended use / etc.etc.etc. - That is all. Maybe GSAP isn't the best option for the animation - if you look through the forum posts - i believe there's one dated yesterday - it has a diagram of what I'm trying to accomplish. I just need it to be easy.  I mean it doesn't make sense to spend 40 hours constantly banging the head to get something to work. ....Best Wishes, look forward to your thoughts. 

 

Edited April 11, 2019 by scatterbrainz
further info /explanation

[Dipscom]

Erm... Not really.

 

Can you formulate a question?

 

As is: "I am trying to bundle GSAP with create-react-app but I seem to be doing something wrong here as it fails to build. Here is a link to a reduced-case example".

[scatterbrainz]

OK: I'm trying to make an create local availability of gsap methods that are accessible in the javascript file locally. SO what is required to locally add the gsap methods to the package.json so that when i run npm build - it includes the gsap dependencies and methods so that the javascript will animate/run properly. (is that better)? 

 

Logic: If I create an install (maybe its a bundled install) of dependencies in a plain js project. Then I can also create the same install into a react app build/install. 

 

let me see if I can generate a working example - I'll post here via codepen. as a follow up 

[scatterbrainz]

@Dipscom

 

Okey dokey - here's the follow up: ? -> hopefully this articulates it all easier. 

 

Here's a pen -> 

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

 for some reason the "a" won't move. 

 

IN THIS ^^ sandbox -> I had to add the dependency in. 

 

and here's another version of it via sandbox > https://codesandbox.io/s/wql01jplo5 

 

IN the codesandbox: I did it 2 different ways: I added the gsap dependency, and I added a script reference to the CDN. in this sandbox version ... 

 

I get TimelineMax -> Not defined (no undefined) -eslint

 

same for "Power0" -> this code I borrowed from Shaun Gorneau -> and augmented slightly. only for referencing.  

 

The goal is to have the dependencies locally available -> so there is no url referencing -> perhaps its stored in a node_module (i've seen) that, but I can't seem to access them. I just keep coming up with (unexpected tokens). So I don't know. (this is on a local version). 

 

hope that helps 

 

 

 

 

 

 

[OSUblake]

3 hours ago, Dipscom said:

But he is not perfect

 

Yes I am. ?

 

3 hours ago, scatterbrainz said:

last a poster -> OSUBlake -> posted DO NOT INSTALL FROM NPM.  But in the documentation it says to do exactly that SO .....???????

 

Context matters. Those instructions were for the question being asked.

 

3 hours ago, scatterbrainz said:

>npm l -g gsap

 

 

The -g is incorrect. That installs it globally. 

> npm install gsap

 

Check this out for React examples.

https://greensock.com/react

 

 

[bdrtsky]

Interesting, how (and why?) you using react, if you didn't learn how to use npm? You installed it globally. Of course you will not find it in node_modules.

[GreenSock]

2 hours ago, scatterbrainz said:

 for some reason the "a" won't move. 

 

Your tween was targeting ".string"...but there's no element with that class. I think maybe you meant "#string-one". Once I fixed that, it seemed to animate fine. 

 

I looked at your codesandbox demo and didn't see any GSAP code, nor any error in the console. I'm kinda lost. Can you provide a reduced test case that shows it broken or generating some kind of error? We'd love to help, but I'm struggling to figure out what exactly the question/problem is. 

[explorerzip]

I'm also confused about why you want to run repackage GSAP and not from the CDN. You can download all the basic GSAP files to run them locally if you must. Seems to be a lot of extra work to bundle it, which won't teach you anything about animation.

 

https://greensock.com/gsap

[Dipscom]

Well, it looks like that while I was asleep, others have chimmed in with useful information.

 

To recap:

 

- It appears you installed the gsap package incorrectly, as Blake pointed out. There's no need to add it globally, it needs to be added as a 'dependency', make sure you're not adding it as a 'devDependency', that'll make a difference.

- On your codepen example, as Jack pointed, you're targeting the wrong element.

- You might want to have a read on using npm to make sure you understand how to install and use packages correctly. Then, you will probably want to read the primer of animating with GSAP in React as linked above.

 

Finally, I think we have come to the conclusion to your thread's title: Contradictory Information. That being: it's not that the information is contradictory, it is relevant to the context it was given. One can use the CDN as a source for GSAP, or download a copy of the script and have it in a local folder, or packaged as a dependency using NPM. Each has its own advantages and its own steps that one must take in order for them to work.

 

Does this help you?