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!
