CODEWITHSUNDEEP
javascripthtmlcssanimation
Lakshya Raj
Lakshya Raj

Reputation: 1775

How do I specify a named animation for .animate()?

I am making a game with plain HTML, not any canvas. In it, I have made an animation that moves the circles and squares to the bottom of the page, called ttb, for to the bottom.

When a circle finishes its animation, I would like it to stop the animations of all other circles/squares. After some research, I came over Element.animate. It looked perfect, but when I saw the code:

// animation of the cupcake slowly getting eaten up
var nommingCake = document.getElementById('eat-me_sprite').animate(
[
  { transform: 'translateY(0)' },
  { transform: 'translateY(-80%)' }
], {
  fill: 'forwards',
  easing: 'steps(4, end)',
  duration: aliceChange.effect.timing.duration / 2
});

// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();

It looks like it can only pause an animation that was started with .animate(). When I found .animate(), I looked at its code and this was the example:

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

It creates an animation with an array, but as I've already created the animation with CSS, do I have to make it again with JS or can I simply give the name of the animation (ttb) as some type of argument to animate it that way? I need to use .animate() because only then I can pause the animation.

Edit:

Here's my code:

function chance(c){return (Math.floor(Math.random()*c)+1)==c;}
setInterval(function(){
    if(chance(7)){
        var o=document.createElement("div");
        var s=chance(2);
        var t=chance(2);
        o.className=(t?"left ":"right ")+(s?"circle":"square")+" ttb";
        if(s){
            o.onanimationend=function(){end("You lost");};
        }else o.onanimationend=function(){try{this.parentNode.removeChild(this);}catch(e){}};
        document.body.appendChild(o);
    };
},500);
function end(m){
    var i=[].slice.call(document.getElementsByClassName("square")).concat([].slice.call(document.getElementsByClassName("circle")));
    var l;
    console.log(m);
    for(l=i.length-1;l>-1;l--)i[l].parentNode.removeChild(i[l]);
    // the above removes all of the elements
    // I would like that it stops their animations instead
}
@keyframes ttb{from{top:-50px;}to{top:100vh}}
.square{position:absolute;width:50px;height:50px;border-radius:10px}
.circle{position:absolute;width:50px;height:50px;border-radius:50%}
.left{background-color:#FF2211}
.right{background-color:#4488FF}
.ttb{animation:ttb 3s linear 0s 1 forwards}
<body style="background-color:#113355;overflow:hidden">
</body>

Upvotes: 0

Views: 70

Answers (1)

Kaiido
Kaiido

Reputation: 136638

You can access the animations created from CSS through document.getAnimations(), then you can filter the returned array by the animationName of the returned Animation objects and cancel, finish or pause it as you wish:

function chance(c){return (Math.floor(Math.random()*c)+1)==c;}
setInterval(function(){
    if(chance(2)){
        var o=document.createElement("div");
        var s=chance(2);
        var t=chance(2);
        o.className=(t?"left ":"right ")+(s?"circle":"square")+" ttb";
        if(s){
            o.onanimationend=function(){end("You lost");};
        }else o.onanimationend=function(){try{this.parentNode.removeChild(this);}catch(e){}};
        document.body.appendChild(o);
    };
},500);
function end(m){
  const animations = document.getAnimations().filter( (anim) => anim.animationName === "ttb" );
  // not sure what you want, here I just pause active ones
  animations.forEach( anim => anim.pause() );
  console.log( m );
}
@keyframes ttb{from{top:-50px;}to{top:100vh}}
.square{position:absolute;width:50px;height:50px;border-radius:10px}
.circle{position:absolute;width:50px;height:50px;border-radius:50%}
.left{background-color:#FF2211}
.right{background-color:#4488FF}
.ttb{animation:ttb 3s linear 0s 1 forwards}
<body style="background-color:#113355;overflow:hidden">
</body>

Upvotes: 1

Related Questions