Jump to content
Search Community

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

Grady test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.


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


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