Jump to content
Search Community

Trying to set .data to another value within a function

majofski test
Moderator Tag

Go to solution Solved by GreenSock,

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 have a set of triggers. These triggers should open and close it's coresponding menu.

 

So I have a problem where a variable isn't being altered when changed inside a function. The variable indicates whether the animation has been run or not. Without the variable changing globally, there to indicate whether the animation needs to be played or reversed. 

 

Here I have a global variable:

var currentAnimation = null;

And a basic `mouseup` function:

$('.trigger').mouseup(function() {
  
  var $trigger = $(this).attr('id'); 
      $trigger = '#' + $trigger; //#calculator-trigger
  var $recipient = $trigger.replace('-trigger', '-reveal-recipient');
  var $recipientContainer = $($recipient).parent('.reveal-recipient-container').attr('id');
      $recipientContainer = '#' + $recipientContainer;

  runAnimation($trigger,$recipient,$recipientContainer);
});

Then a basic check to ascertain which trigger it is, as each trigger has a different animation:

function runAnimation($trigger,$recipient,$recipientContainer){

  if (currentAnimation === null) {

    // Which animation needs to be run (based on the trigger clicked)
    whichAnimationIsIt($trigger,$recipient,$recipientContainer);   
    currentAnimation.play();
    
    ///////////////////////
    // Problem lies here //
    // Why won't the currentAnimation.data get set to 1?
    currentAnimation.data = 1
    ///////////////////////
    ///////////////////////

  }
  // If the recipient is currently open
  if (currentAnimation.data === 0) {
    currentAnimation.play();
    currentAnimation.data = 1;
  } 
  // Close if not
  else {
    currentAnimation.reverse();
    currentAnimation.data = 0;
  }
}

function whichAnimationIsIt($trigger,$recipient,$recipientContainer){
  if($trigger === '#search-trigger'){
    searchAnimation($recipient,$recipientContainer);
  }
  if($trigger === '#calculator-trigger'){
    calculatorAnimation($trigger,$recipient,$recipientContainer);
  }
}

Basically, I need the currentAnimation.data to be set to 1 (and thus alter the global variable) after the animation has run. Running the debugger tells me that up until the /////Problem lies here//////// line, everything works as planned. 

What could I be doing wrong?

See the Pen vyYmNz?editors=0010 by modermo (@modermo) on CodePen

Link to comment
Share on other sites

I didn't have much time to dig into the code, but from a cursory glance it looks like the problem is just that you've got a "var" declaration inside your functions, thus it's treated as a LOCAL variable (dumped as soon as the function is done) rather than altering the global one you set up at the top. 

 

In other words:

var myGlobal = 1;

function BAD() {
   var myGlobal = 2; //THIS WON'T ALTER THE GLOBAL! It's establishing a NEW, local variable with the same name that's garbage-collected the moment the function finishes running
}

function GOOD() {
    myGlobal = 2; //this will work. Alters the global variable. No "var" ahead of it. 
}

Does that help? 

  • Like 2
Link to comment
Share on other sites

Hey there. Thanks for the response. 

 

 

The thing is,

 currentAnimation.data = 1

 is trying to affect the global variable.  currentAnimation as you can see below, was declared globally, not inside the function. 

var currentAnimation = null;
Link to comment
Share on other sites

  • Solution

Right, you declared currentAnimation on the global scope....AND as a local variable also. That's the whole point (and problem). A locally-scoped one always overrides the global one. I'm not sure you understood my answer :) Or perhaps I'm misunderstanding your point. Either way, I'm pretty sure that if you remove "var" inside your functions, it'll solve your issue. Did you try that? 

Link to comment
Share on other sites

Yes! Solved it with that information. Basically what was happening was that every time I went to get the animation:

function calculatorAnimation($trigger,$recipient,$recipientContainer) {
    var currentAnimation = new TimelineMax();

I was resetting the global currentAnimation because I was declaring var.

 

Removing it was the fix. Thanks, Jack!!!

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