Animation Declared as Variable Running Immediately - Trying to Use isActive()

[Grady 1 Likes (Newbie)]

I've recently begun working with GSAP in conjunction with Three.JS and have run into an issue that's been driving me a bit nuts.  In my CodePen, I have a Three.JS scene that takes a camera starting at y = 72 and moves it up or down in increments of 12 based on arrow key input.

 

In my original code (currently commented out) I put the GSAP animations for "up" and "down" inside functions, which execute when the corresponding arrow keys are pressed and are constrained to y > 0 and y < 72 respectively. This works well, but if a user presses an arrow key while the animation is running, it breaks out of the increments and is no longer constrained between steps. In an attempt to remedy this, I tried adding isActive() to my onDocumentDown function, but couldn't get it to work with my existing animation functions.

 

Per a few examples I can across online, I declared the animations as variables and now, while I'm no longer getting errors in the console log, the camera immediately starts moving upwards without user input when the page loads. Adding console.log("Active") to the if(!moveDown.isActive()) conditional shows that every time I press the down key, "moveDown" is already active, even though the user hasn't provided any previous input.

 

From the bit of troubleshooting I've done, it seems like the animation is running when the variable is declared, but that doesn't seem to be the behavior in other examples I've come across? Almost positive I'm making some very stupid, basic mistake, so any help would be immensely appreciated!

See the Pen zYEXLBY by gradyw (@gradyw) on CodePen

[OSUblake 18,491 Likes (Superhero)]

Welcome to the forums @Grady

 

Putting moveUp or moveDown inside an if statement isn't going to do anything, and you shouldn't negate the isActive. Perhaps you meant something like this, and do the same for moveUp.

 

if(moveDown.isActive()){
  return;
}
else {
  moveDown = gsap.to(camera.position, { y: '-=12', ease: 'none' });
}

 

[Grady 1 Likes (Newbie)]

@OSUblake

 

Thanks for the response! Totally a stupid mistake on my end (I also didn't check to see if moveUp was active as well, woops). Working great now, thanks again!