Prabhat Pal Posted August 10, 2021 Share Posted August 10, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted August 10, 2021 Share Posted August 10, 2021 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 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 10, 2021 Share Posted August 10, 2021 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 3 1 Link to comment Share on other sites More sharing options...
OSUblake Posted August 10, 2021 Share Posted August 10, 2021 Builds tools are beyond the scope of this forum, but for reference. 2 Link to comment Share on other sites More sharing options...
Kopano Segano Posted March 22 Share Posted March 22 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? Link to comment Share on other sites More sharing options...
Cassie Posted March 22 Share Posted March 22 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" Link to comment Share on other sites More sharing options...
Kopano Segano Posted March 22 Share Posted March 22 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 Link to comment Share on other sites More sharing options...
Kopano Segano Posted March 22 Share Posted March 22 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: ) Link to comment Share on other sites More sharing options...
GreenSock Posted March 22 Share Posted March 22 @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). Link to comment Share on other sites More sharing options...
Cassie Posted March 22 Share Posted March 22 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! Link to comment Share on other sites More sharing options...
Kopano Segano Posted March 22 Share Posted March 22 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted March 22 Share Posted March 22 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! Link to comment Share on other sites More sharing options...
Cassie Posted March 22 Share Posted March 22 debugging.mp4 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! 1 Link to comment Share on other sites More sharing options...
Kopano Segano Posted March 22 Share Posted March 22 1 hour ago, Cassie said: debugging.mp4 6.46 MB · 0 downloads 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now