My gsap is not working

[Prabhat Pal]

I am a beginner in JavaScript and animation My code is not working can someone assist me.

I installed it using zip-file and now its not working I tried all the possible way of importing it.

 

[OSUblake]

Don't use import unless you are using a build tool. Just start out with a script tag.

https://codesandbox.io/s/cool-darkness-ycdup?file=/index.html

 

[mvaneijgen]

As a beginner I would suggest starting your code within code pen and testing your code there. If you then feel comfortable only then move your code over to a local setup. There is so much that can go wrong with your local setup, that it is hard to debug with a few screenshots. 

 

Codepen also lets you export your code with it all working and setup for you.

 

See the Pen BaRvJOp by mvaneijgen (@mvaneijgen) on CodePen

 

BTW your code is all working, so the way you try to import GSAP in your setup is not working, as @OSUblake suggests just use script tag

[OSUblake]

Builds tools are beyond the scope of this forum, but for reference.

 

 

[Kopano Segano]

good day guys.. i installed gsap and used the tag but its not working, i even downloaded it and tried installing it via my terminal but still nothing.. can i get some assistance?

[Cassie]

Hi there! Sure thing. Can you list out the steps you've tried, the code you're using and what you mean by "not working"

[Kopano Segano]

10 minutes ago, Cassie said:

Hi there! Sure thing. Can you list out the steps you've tried, the code you're using and what you mean by "not working"

ok, so for context i'm new to coding and i was following tutorials on youtube. This is my 3rd attempt at using gsap  in html and js files but its not working.. i copied the gsap srcipt tag and installed it using the terminal via npm and it still didnt work 

[Kopano Segano]

2 minutes ago, Kopano Segano said:

ok, so for context i'm new to coding and i was following tutorials on youtube. This is my 3rd attempt at using gsap  in html and js files but its not working.. i copied the gsap srcipt tag and installed it using the terminal via npm and it still didnt work 

I then decided to go for a different approach and followed the tutorial that used the terminal method but it still didnt work.. for more context i'm using a macbook air .. the tutorial i'm follwoign is code grid on youtube (link: 

)

[GreenSock]

@Kopano Segano it's super difficult to troubleshoot by just looking at screenshots of your code, but my best guess is that your script.js file isn't loading because maybe you don't have the path correct there. I'm totally guessing. I have no idea where you script.js file is in relation to your index.html file. If it's in the same directory, try removing the "./" from in front of it, like <script src="script.js"></script>. And of course it'd be useful to see what you actually have inside that script.js file. This is why we really need a minimal demo in order to troubleshoot here (like a CodePen or Stackblitz or even a link to your faulty page). 

[Cassie]

gsap-starter.zip

I've made you a little sample project so you can see where you put your files. Maybe it'll help?

From the screengrabs, you're certainly on the right track with the script tags and I think Jack's likely correct about the path being the issue.

Don't worry about npm for now if you're just learning to code. It's a more complicated route which is only necessary if you've got other stuff set up that bundles your javascript for you. Script tags will serve you just fine!

[Kopano Segano]

1 hour ago, Cassie said:

gsap-starter.zip

I've made you a little sample project so you can see where you put your files. Maybe it'll help?

From the screengrabs, you're certainly on the right track with the script tags and I think Jack's likely correct about the path being the issue.

Don't worry about npm for now if you're just learning to code. It's a more complicated route which is only necessary if you've got other stuff set up that bundles your javascript for you. Script tags will serve you just fine!

ok, i just uploaded the file, maybe you can guide me from here, i didn't insert the script tag in the js file. I'm trying to get the loading page to the landing page lol i hope this makes sense

webdsgnpractice.zip

[Rodrigo]

Hi,

 

There is one issue in your code, but before that as an advice is always a better practice to give your files (CSS, JS, Images, etc.) a relative path, right now you have this:

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

That basically tells the browser to look for those files at the root of the server, in some cases is better to use relative paths based on the current folder:

<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>

Now onto the issue, you have a wrong tertiary operator in your code here:

shuffledText +=
  i < index ? originalText[i].Math.random().toString(36)[2];

You're missing the second part of that logical operator:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator

 

Finally is worth noticing that porting this demo into a codepen minimal demo shouldn't be too hard and would've made the issue visible a long time ago without the need for all this:

 

Hopefully this helps.

Happy Tweening!

[Cassie]

 

 

What @Rodrigo said. Adding that you're also using a require import which isn't needed in your setup at all.

Here's a little video showing the debugging process seeing as you're new to this. I thought it might be helpful. In dev tools you can see console errors which point to the line in the file that the error is occurring.

Good luck with the learning!

[Kopano Segano]

1 hour ago, Cassie said:

 

What @Rodrigo said. Adding that you're also using a require import which isn't needed in your setup at all.

Here's a little video showing the debugging process seeing as you're new to this. I thought it might be helpful. In dev tools you can see console errors which point to the line in the file that the error is occurring.

Good luck with the learning!

Cassie your'e the goat if i could send you flowers i would haha.. thank you.. the landing page didn't open up like i thought it would but i'll keep practicing and thank you rodrigo, you guys are awesome