On complete function is being called before the animation even begins

I have, been coding a game for a project. An object is created at a specific outside of the visible area and is called to move the object to an area on the opposite side of the screen outside the visible area, after this animation has run I want to delete the object and recreate a new object that will start and stop in its own unique location. For some reason My oncomplete Function runs before the animation even begins, I am really not sure as to why this occurs.

 gsap.to(".ball",{top: topend,left: leftend,delay:3,onComplete: deletesprite(sprite),duration: 2});
   

}
function deletesprite(sprite){
    sprite.remove();
    console.log("sprite deleted");
}

This is cut down show of my code as you see below the sprite remove function runs before even the animation starts and provides the error shown below, Feel free to ask for any more necessary information and I will be happy to provide it.

Edit** Instead of telling giving greensock the function to call after running, I was instead running the function inside the onComplete section

Instead of telling giving greensock the function to call after running, I was instead running the function inside the onComplete section,

gsap.to(".ball",{top: topend,left: leftend,onComplete: deletesprite,onCompleteParams: [sprite],duration: 2});