How do I stop a gsap.to animation with an onclick function?

Question

The problem I am having right now is that I cannot stop the animation on click of the balloon. I have tried using .stop() and .pause() but they all turn out to be errors in the console saying that pause() is not defined etc. How do I make it that when I click on the image, my animation stops?

Html code

            <div class ="scene3 frame">
            <img src = "img/1x/Cloud 1.png" class = "s3cloud1">
            <img src = "img/1x/Cloud 2.png" class = "s3cloud2">
            <img src = "img/1x/Cloud 3.png" class = "s3cloud3">
            <img src = "img/1x/Cloud 4_1.png" class = "s3cloud4">
            <img src = "img/1x/Tree.png" class = "tree">
            <img src = "img/leafegg.png" class = "leafegg" onclick = "#">
            <img src = "img/stoneegg.png" class = "stoneegg" onclick = "#">
            <img src = "img/1x/Rock.png" class = "stone" onclick = "magic()">
            <div class = "gift">
            <img src = "img/skyegg.png" class = "skyegg" onclick = "#">
            <img src = "img/balloon.png" class = "balloon" onclick = "stopballoon()">
            </div>
            </div>

css

.scene3{
    height:300px;
    width:400px;
    overflow:none;
    background:url("img/1x/Scene 2.png");
    opacity:0;
    display:none;
}

.tree{
    margin-top:20px;
    margin-left:20px;
    position:absolute;
}

.s3cloud1{
    position:absolute;
    margin-top:10px;
    margin-left:420px;
}
.s3cloud2{
    position:absolute;
    margin-top:60px;
    margin-left:450px;
}
.s3cloud3{
    position:absolute;
    margin-top:40px;
    margin-left:450px;
}
.s3cloud4{
    position:absolute;
    margin-top:20px;
    margin-left:450px;
}

.leafegg{
    width:40px;
    position:absolute;
    margin-left:125px;
    margin-top:100px;
    transform:rotate(5deg);
}

.leafegg:hover{
cursor:pointer;
}

.stoneegg{
    width:40px;
    margin-left:260px;
    margin-top:220px;
    position:absolute;
    transform:rotate(5deg);
}

.stone{
    margin-left:230px;
    margin-top:220px;
    position:absolute;
}

.stone:hover{
    cursor:pointer;
}

.skyegg{
    width:40px;
    position:absolute;
    margin-top: 89px;
    margin-left:437px;
}

.balloon{
    position:absolute;
    margin-left:400px;
}
.balloon:hover{
    cursor:pointer;
}

My Javascript

var giftenter = {
    delay:5,
    marginLeft:"-500px",
    repeat:-1,
    ease:Linear.easeNone,
    duration:20,
}

var giftmove = {
    delay:4,
    rotate:"15deg",
    yoyo:true,
    repeat:-1,
    duration:3,
    ease:Linear.easeNone,
}

function cue(){
    gsap.to(".gift", giftenter);
    gsap.to(".gift", giftmove);
}


function magic(){
    gsap.to(".stone", disappear);
}

function stopballoon(){
    giftmove.stop();
    giftenter.stop();

}

function transition2to3(){
    gsap.to(".ask", dialoguedisappear);
    gsap.to(".ZipperScene2", zipperdown);
    gsap.to(".scene2", twotothree);
    gsap.to(".scene3", activate3);
    gsap.to(".s3cloud1", cloud1);
    gsap.to(".s3cloud2", cloud2);
    gsap.to(".s3cloud3", cloud3);
    gsap.to(".s3cloud4", cloud4);
    setTimeout(cue, 1000);
}

Answer 1

giftmove.stop() does not work because giftmove is just your standard object, it is not the animation.
You need to save a reference to the animation.
Something like
let giftAnimation = gsap.to(".gift", giftmove);
Then you would be able to call the stop() function on it like..
giftAnimation.stop().

But, as you are setting up objects to be passed to the to() function, why not just set up these animations at the beginning?
for example.. change this..

var giftmove = {
    delay:4,
    rotate:"15deg",
    yoyo:true,
    repeat:-1,
    duration:3,
    ease:Linear.easeNone,
}

to this.

var giftmove = gsap.to('.gift', {
    delay:4,
    rotate:"15deg",
    yoyo:true,
    repeat:-1,
    duration:3,
    ease:Linear.easeNone,
    paused: true,
});

This way, giftmove is the actual animation and you would be able to call the gsap functions like giftmove.play(), giftmove.stop() etc.

Here is a nice cheatsheet for reference.