Jump to content
Search Community

onComplete never fires or the animation just breaks

UI UNICORN test
Moderator Tag

Recommended Posts

Hi so I am trying to get an on complete call back when the animation is finished but it just won't work when i do this:

   gsap.to(water.position, {

duration: 1.6,
     y: -3,                                          
  ease: Quad.easeOut,                                                                  
 onComplete:console.log('finish'),

});

 

the animation works perfectly but I never get the on complete call back ... something was telling me maybe the oncomplete and ease weren't in the right code block so I did this:

 

   gsap.to(water.position, {
  duration: 1.6,
     y: -3,

},

{                                         
  ease: Quad.easeOut,                                                                  
 onComplete:console.log('finish'),

});

 

funny enough the water moves to the position but it jumps and there isn't an animation but now i get a call back from onComplete?

the synx must be wrong but i don't know where?

 

thanks for reading

Link to comment
Share on other sites

Hey,

 

You need to pass a function to onComplete like this:

 

// normal function

onComplete: function() {
  console.log('finish')
}

// arrow function

onComplete: () => {
  console.log('finish')
}

 

Gsap calls your function something like this: onComplete(). On your logic gsap would call it like: console.log('finish')() which throws an error.

 

Hope this clears up. 

  • Like 3
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...