Jump to content
GreenSock

Gary Horsman

onclick with image not executing TweenLite

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

I've been a longtime user of the AS3 version of the GreenSock animation libraries and really got a lot of mileage out of them. Now I'm moving onto the JS version.
 
You'll excuse me if I'm just a beginner at this. I'm trying to execute a TweenLIte animation by directly clicking on an HTML image to call functions from an external JS file. But when I click, nothing happens.

 

My HTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GSAP Test 3</title>
<!--CDN link for the latest TweenMax-->
<link href="css/gsap_test_01.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="js/gsap_test_03.js"></script>


</head>


<body onload="init()">
<img src="images/yeller.png" alt="Yeller" name="imgyeller" width="150" height="150" id="imgYeller" />
<p>Click the girl to make her disappear</p>
</body>
</html>

My external JS file, gsap_test_03.js.

// JavaScript Document


function init() {
var yeller = document.getElementById("imgYeller");
yeller.addEventListener("click", disappear, false);
}


function disappear() {
TweenLite.to(yeller, 1, {width:20, height:20, opacity:0});
}

I tested it with just a simple alert call in the second function and it seems to have worked fine. But when I add the TweenLite code, I'll click on my image, but there is no reaction. I also tried it earlier as a straight function call without the onclick and it worked great.

 

Am I just messing up on syntax or something simple having nothing to do with TweenLIte? I've been scouring the web for hours trying to figure out what I'm doing wrong, but there is precious little useful information.

 

Link to comment
Share on other sites

Hi

 

Why don't you add the code gsap_test_03.js inside a script tag, before the closing body tag and call the init function at the end of the same file, I wouldn't recommend use the onLoad inside the body tag.

 

Also there are some unnecessary stuff in your code, in HTML5 the doctype declaration can have only html in it and the html tag doesn't need all that stuff either. Take a look in google regarding doctype declaration and HTML5 tags.

 

Best

Rodrigo

  • Like 2
Link to comment
Share on other sites

Thanks, Rodrigo. I'll give it a try.

 

The doctype declaration is the default in Dreamweaver as I've left it, but I don't see how that affects the functionality of my script. Maybe just a little side observation?

 

And isn't it better form to keep all Javascript external for easier maintenance and to separate content from behavior?

Link to comment
Share on other sites

Tried this.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GSAP Test 4</title>
<!--CDN link for the latest TweenMax-->
<link href="css/gsap_test_01.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>


<body>
<img src="images/yeller.png" alt="Yeller" name="imgyeller" width="150" height="150" id="imgYeller" />
<p>Click the girl to make her disappear</p>


<script>
window.onload = function init() {
var yeller = document.getElementById("imgYeller");
yeller.addEventListener("click", disappear, false);
}


function disappear() {
TweenLite.to(yeller, 1, {width:20, height:20, opacity:0});
}
</script>
</body>
</html>

Doesn't work.

:oops:

Link to comment
Share on other sites

hello.. your window.load function should look like this

window.onload = function() {
     var yeller = document.getElementById("imgYeller");
     yeller.addEventListener("click", disappear, false);
};

notice how you dont need to use init() since your assigning the window.load an anonymous function :)

 

also have you looked at using a javascript library like jQuery or Zepto to handle the cross browser event handling. the reason I suggest this is because addEventListener() isnt available in some browsers like IE which in some versions use attachEvent()

 

http://api.jquery.com

http://zeptojs.com

  • Like 2
Link to comment
Share on other sites

You don't need to embed the javascript in the page - using an external file is good practice in most cases. I see the confusion but I think Rodrigo was just meaning to move the script tag.
 
It looks like the reason this wasn't working is that yeller was being defined inside the init() function, which is not in a scope accessible by disappear(). TweenLite didn't have a valid target to tween with.
 
You could change it to

var yeller;
function init() {
    /* since yeller is a global variable, it can be
       accessed in both init() and disappear() */
    yeller = document.getElementById("imgYeller");
    yeller.addEventListener("click", disappear, false);
}

or

function init() {
    var yeller = document.getElementById("imgYeller");
    yeller.addEventListener("click", function() {
        TweenLite.to(yeller, 1, {width:20, height:20, opacity:0});
        /* yeller is now accessible since this function can access
           init()'s variable scope */
    }, false);
}

I suppose it's not entirely learner friendly, but this stackoverflow question gives a quick overview of some of the different scope tricks in javascript. Googling for javascript variable scope should be filled with results as well.

  • Like 5
Link to comment
Share on other sites

Thanks, Jamie. I had a feeling this was more related to a Javascript issue rather than to TweenLite per se, but I was getting a bit desperate. I am doing my best to get up to speed on my JS proficiency, but many of the online examples diverge so much that it's hard to know what are the best practices.

 

Sorry if this post was ultimately out of scope with the GSAP, but I'm always impressed with the help I get here going back to my days working with the AS3 version.

 

Much thanks!

Link to comment
Share on other sites

Wow. Just tested it and it works like a charm now.

 

Also I took out the JS call from the body tag as recommended by Rodrigo and instead put a window.onload command at the top of my external JS file to call the init( ) function to keep it separated from the HTML document.

 

I learned a valuable lesson about variable scope. Thanks to everybody for your help, especially to Jamie and his hand-holding as I figure out this whole new universe of Javascript.

  • Like 4
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.
×