Jump to content
Search Community

Global variable not working in TweenMax code

flash08 test
Moderator Tag

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 am using TweenMax to create some small banner ads. The client wants some timed things, no problem.

 

But I'm wondering why in the following code, I have to declare "var pointer" more than once.

 

Why is the initial declaration (is it not a global variable here?) not available to the endseq function? That is, if I remove the var pointer line (in blue) from the endseq function, the code breaks. Stupid question, I know, but JS is not my cup of tea.

 

 <script>
window.onload = function(){
    var pointer = document.getElementById("arrow");
    var text = document.getElementById("message");
    TweenMax.to(pointer, .8, {x:-30, repeat:6, yoyo:true});
    TweenMax.to(text, .8, {repeat:6, border:"2px solid white", yoyo:true, color:"white", onComplete:endseq});

}
function endseq(){
    var pointer = document.getElementById("arrow");
TweenMax.to(pointer, 1.9, {rotation:360});
TweenMax.to(pointer, .8, {x:-5, repeat:0});    
}
    </script>

Link to comment
Share on other sites

Hello flash08, and Welcome to the GreenSock Forum!

 

You would need to pass your pointer  variable via the onCompleteParam. Found in the TweenMax Docs under Special Properties, callbacks and eases

  • onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example,TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like:onCompleteParams:["{self}", "param2"]
<script>
window.onload = function() {

   var pointer = document.getElementById("arrow");
   var text = document.getElementById("message");
   TweenMax.to(pointer, .8, {
      x: -30,
      repeat: 6,
      yoyo: true
   });
   TweenMax.to(text, .8, {
      repeat: 6,
      border: "2px solid white",
      yoyo: true,
      color: "white",
      onCompleteParams: [pointer], /* pass the 'pointer' variable here to your endseq() function */
      onComplete: endseq
   });

};

function endseq(p) { /* notice the 'p' argument that is used as your 'pointer' variable above */
    TweenMax.to(p, 1.9, {rotation: 360});
    TweenMax.to(p, .8, {x: -5,repeat: 0});
}
</script>

Let us know if you have any more questions. If so please setup a codepen demo example so we can help you better.

 

Here is a video tut link on how to create a codepen demo example:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

:)

  • Like 3
Link to comment
Share on other sites

And just to piggy-back on Jonathan's comment...

 

Whenever you declare a variable using "var ...", it locks it into that particular function's scope. You cannot "see" it outside of that function. If you declare the variable literally outside of any function, directly in the main document, that'd be consider "global". Otherwise, it's a "local" variable (inside a function).

 

This is just how JavaScript works and has nothing to do with GSAP. It's actually a very powerful concept and can be quite useful. Confusing at first, though, I know. If you Google around about JavaScript scope, it might help. 

 

You can declare it on the root like this: 

var pointer = document.getElementById("arrow");
window.onload = function(){
    var text = document.getElementById("message");
    TweenMax.to(pointer, .8, {x:-30, repeat:6, yoyo:true});
    TweenMax.to(text, .8, {repeat:6, border:"2px solid white", yoyo:true, color:"white", onComplete:endseq});
}
function endseq(){
    TweenMax.to(pointer, 1.9, {rotation:360});
    TweenMax.to(pointer, .8, {x:-5, repeat:0});    
}
  • Like 2
Link to comment
Share on other sites

Thanks to you both! I guess it's time to do some more Javascript research.

 

I was wondering, as all of the examples of onCompleteParams seem to be AS-oriented.

 

So, if I wanted to passm more than 1 parameter, is it just stated like this?

 

onCompleteParams: [pointer, text],

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...