Jump to content
Search Community

GreenSock commands in external js file are undefined

AdObeOne test
Moderator Tag

Go to solution Solved by AdObeOne,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I apologize for this newbee question, but I can't find the answer.

 

I want to use GreenSock commands that are in a js file (called TextTest2script) in a folder called "js".

 

I've included all the necessary files in the head tag in the html file.

  <script type="text/javascript" src="js/TweenMax.min.js"></script>

  <script type="text/javascript" src="js/SplitText.min.js"></script>
  <script type="text/javascript" src="js/TextTest2script.js"></script>
 

But Dreamweaver CC 'says' that the commands are undefined.

 

How do I resolve this?

 

Thanks for your help,

 

Ad

Link to comment
Share on other sites

Hm, I'm not quite sure what you mean by "commands are not defined", but I wonder if maybe you tried to run your scripts too high on the page, before the elements actually exist on the page. For example, if you load JavaScript that tweens an element named "myElement" but that element is actually LOWER in the HTML (thus when the browser executes the code, it wonders "what the heck is 'myElement? I can't find it"), that may be causing the problem for you. 

 

To test that theory, move your <script> tags to the very BOTTOM of your <body>. Does that help? 

 

If not, please show us exactly the code you're using so that we can easily replicate the issue on our end (at this point we're kinda shooting blind) :)

  • Like 1
Link to comment
Share on other sites

Thank you Jack. Moving the <script> tags to the bottom of the <body> did the trick. The animation works now.

 

But still DreamWeaver CC complains that all the GreenSock-commands are undefined. It indicates this when you hover the mouse over the red line number of a file. The red indicating that there is an error in that line. So it is not an element name about which DreamWeaver complains that is doesn't know yet when it loads the javascript file, when the <script> tag is in the head section. 

 

Strange that this solution works and that DreamWeaver CC still complains about it.

Link to comment
Share on other sites

Hello Jack. Thanks for your reply. Yes, wonky, but it works. I just converted the split text example from the code pen to Dreamweaver to understand the principle of what should go where.

 

Now I'm trying to use the same wonky logic to enable the user to place 4 puzzle pieces on to 4 placeholders, using the draggable and droppable functionality of GreenSock. I can't get it to work. Doesn't anyone use DreamWeaver in combination with Greensock? I'm sure there must be a simple thing or a few things that I should or should not do to make the Greensock code in a separate js file animate elements in a html file within a DreamWeaver project. Can anyone help me?

Link to comment
Share on other sites

I don't think Dreamweaver is a very popular tool in web development circles, but I could be wrong. Most people are using something like SublimeText or WebStorm/PhpStorm. But I can't imagine why Dreamweaver wouldn't work here. It should be fine. (Again, that's more of an Adobe question). 

 

it's tough to diagnose the problem blind - is there any way you could create a reduced test case, zip your file(s) and post here? You can click the "more reply options" button to get to a screen where you can attach a file. 

  • Like 1
Link to comment
Share on other sites

Thank you Jack for your reply. The problem / solution should be generic, not specific to DreamWeaver. Neither is it a case of a specific command not working. It's seems to be a scope / path problem.

 

GreenSock commands within the <body> tags in a html file work fine. GreenSock files included in the <head> tag of that html file. GreenSock commands in a separate javascript file don't work. A file that is included in the <head> tag of that same html file, after the GreenSock files. That should work, right? That is how the SublimeText and WebStorm/PhpStorm users would do it as wel. Isn't it?

 

I'm not a hard core web developer. I just want to make a piece of animated / interactive content using GreenSock, that I then give to a web developer to implement in the site of his client. DreamWeaver is ideal for me. But I can't cram everything into the html file, just to make it work. I want to deliver the code in a nice separate javascript file with the assurance that it works.

Link to comment
Share on other sites

Thanks for the files. Very helpful. 

 

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale = 1.0" />
        <title>Test</title>


        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/TweenMax.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
 <div>
      <!--Whatever TweenMax command I put here works fine.-->
<img id="image" src="images/image.png" width="100%" height="auto" alt="An image">
      <script> TweenLite.to("#image", 1.5, {width:100}) </script>
     </div>
    </body>
</html>

You are loading js/script.js BEFORE the body of the page is rendered to the screen.

That means that code in js/script.js will NOT be able to find <img id="image" ...> because that element doesn't yet exist (as far as the browser is concerned).

 

 

in order to use TweenMax code (or any js) that targets the DOM in an external file, the DOM must be loaded and rendered first.

Technically you could leave your script tag where it is and in your js file wrap everything in a jQuery ready() function, but I prefer to just load my custom script right before the closing </body> tag like

 

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale = 1.0" />
        <title>Test</title>
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/TweenMax.min.js"></script>
        
    </head>
    <body>
 <div>    
<img id="image" src="images/image.png" width="100%" height="auto" alt="An image">     
     </div>
    <script type="text/javascript" src="js/script.js"></script>
    </body>
</html>

This ensures that the custom code in js/script.js is not loaded or executed until AFTER the DOM is ready and accessible.

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello Jack. Thanks again for your help. It works. Strange that my website (www.pixelray.nl) works just fine where I include the javascript in the head like in the example code. That javascript controls the media queries and the animated menu and it works just fine.

 

I would not expect the place of including the javascript to be the problem for the GreenSock code. DreamWeaver still complains that the GreenSock code in the javascript file of this example is undefined even when it is included just before the end of the body tag. But I'll just ignore that ;-)

 

I sure am glad that GreenSock exists. It makes my work much more easy and much more fun. Thank you.

Link to comment
Share on other sites

the solution I provided worked fine in Dreamweaver CS6 with no complaints, perhaps CC is different. 

 

I just looked at your live site where you have animatieScript.js in the head and it is throwing errors (as I would expect):

 

DGogXmz.png

 

At this point, my best advice is just to put your js before the closing body tag, despite what Dreamweaver may say.

  • Like 2
Link to comment
Share on other sites

I experience the same output problems where I use CodeKit because I'm too lazy to reload the page on saving the external javascript file. I get all kinds of errors which I have attached as a screenshot. I don't know if I'm doing something wrong with scoping or using the TweenMax library not as a new constructer as lint tells me that its a bad thing to do but it is kind of annoying. I attached a codepen with the code as being used in order to come to my animation.

 

 

See the Pen jbpGJW by anon (@anon) on CodePen

 

XO5CBX1.png

 

 

post-39689-0-79589200-1446534539_thumb.png

Link to comment
Share on other sites

dellai, sorry to hear about the trouble but that sounds more like a CodeKit question. Unfortunately we have no control over how other software works or spits out warnings/errors about valid JavaScript. I wish I had a better answer for you. Have you reached out to the CodeKit authors? I bet there may be a preference/setting you could tweak to turn off those errors. If not, there should be. 

 

Oh, and in the future it's probably best to just start your own forums thread rather than tag it onto a resolved one. I know your question was somewhat related, but it's still cleaner to start a new thread especially because you're using totally different software than AdObeOne.

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...