nThenSome Posted May 31, 2020 Share Posted May 31, 2020 I created a simple animation when my page loads. It works fine on Codepen and my local server, Brackets, Live Preview. But when I upload it on my server and try it online, the page loads but no animation. I am at a loss, am I missing something? See the Pen zYvgLKL by nTSM (@nTSM) on CodePen Link to comment Share on other sites More sharing options...
Greg Stager Posted May 31, 2020 Share Posted May 31, 2020 I cannot tell from the codepen - how and when are you bringing in the gsap library for your web version? Link to comment Share on other sites More sharing options...
nThenSome Posted May 31, 2020 Author Share Posted May 31, 2020 Thanks for your reply. I have placed it at the bottom of my html page. <script src=https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js></script> <script src="JS/textAni.js"></script> </body> </html> Link to comment Share on other sites More sharing options...
Greg Stager Posted May 31, 2020 Share Posted May 31, 2020 Try bringing them in at the beginning in your head tag. <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> ... Link to comment Share on other sites More sharing options...
nThenSome Posted May 31, 2020 Author Share Posted May 31, 2020 I tried but still the same thing. Link to comment Share on other sites More sharing options...
Greg Stager Posted May 31, 2020 Share Posted May 31, 2020 I am guessing a syntax/format issue somewhere, then. When I pull your animation into single html file to my server it comes up OK. Your server settings may be more strict than CodePen or Brackets where some mistakes may simply be ignored. Link to comment Share on other sites More sharing options...
Greg Stager Posted May 31, 2020 Share Posted May 31, 2020 I see you are missing quotes around your src for the gsap library in this post... 19 minutes ago, nThenSome said: I have placed it at the bottom of my html page. <script src=https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js></script> <script src="JS/textAni.js"></script> Link to comment Share on other sites More sharing options...
nThenSome Posted May 31, 2020 Author Share Posted May 31, 2020 I noticed the quotes earlier and put them in. However still not working. Thank you for your time. I'll go back and sift through and try to find the error. Thanks again. Link to comment Share on other sites More sharing options...
Greg Stager Posted May 31, 2020 Share Posted May 31, 2020 I wonder if it is finding your .js file... You might try troubleshooting that by dropping a script tag in your html file within the body tag. <script> gsap.from("#title, #musicStyles, #aside", {opacity:0, scale:3, duration:1, stagger: .75, ease:"power2"}); </script> Link to comment Share on other sites More sharing options...
GreenSock Posted May 31, 2020 Share Posted May 31, 2020 @nThenSome can you provide the URL of your page that's not working? It's just super difficult to troubleshoot blind. Or did I miss a link that you provided somewhere? You've got the same HTML markup in the live site too, right? I have absolutely no idea about server-side stuff, but maybe it's a MIME type setting, like if the server is sending the JavaScript file(s) as an unexpected type? Totally stabbing in the dark. 1 Link to comment Share on other sites More sharing options...
nThenSome Posted May 31, 2020 Author Share Posted May 31, 2020 Thanks everyone for your help and advice. The issue is resolved. I tried Greg's advice and put the script in the body tag, animation worked. Then I deleted and relinked the external js script and all is well. Thanks again for all your support. 1 Link to comment Share on other sites More sharing options...
Greg Stager Posted May 31, 2020 Share Posted May 31, 2020 Glad to hear you have it going! Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 31, 2020 Share Posted May 31, 2020 8 hours ago, Greg Stager said: I see you are missing quotes around your src for the gsap library in this post... Quotes are technically optional for HTML attributes. Though I recommend using them for readability. 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