Как остановить анимацию gsap.to с помощью функции onclick?

Question

Проблема, с которой я столкнулся прямо сейчас, заключается в том, что я не могу остановить анимацию при нажатии на шарик. Я пробовал использовать .stop () и .pause (), но все они оказались ошибками в консоли, говоря, что pause () не определен et c. Как сделать так, чтобы при нажатии на изображение моя анимация останавливалась?

Html код

            <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;
}

Мой 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() не работает, потому что giftmove - это просто ваш стандартный объект, это не анимация.
Вам нужно сохранить ссылку на анимацию.
Что-то вроде
let giftAnimation = gsap.to(".gift", giftmove);
Тогда вы сможете вызвать на нем функцию stop() как ..
giftAnimation.stop().

Но, поскольку вы настраиваете объекты для передачи в функцию to(), почему бы просто не настроить эти анимации в начале?
например .. изменить это ..

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

к этому.

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

Таким образом, giftmove - это фактическая анимация, и вы сможете вызывать такие функции gsap, как giftmove.play(), giftmove.stop() et c.

Вот хорошая шпаргалка для справки .

Answer 2

Все, что мне нужно было сделать, это gsap.killTweensOf(".gift");