why is onfinish null when web animations are stored in an array?

I am using the Web Animations API to animate dom elements. When I use "animation.'onfinish' = function(){}" this works as it should. The problem is when I store several animations as an array and then try to use the same method as above on a single index. I have looked at the array in the dev console and the animations are there, but for each animation in the array, 'onfinish = null'. In the dev console, If I check a lone (not in an array) animation, onfinish = 'finished'. Why is it different? Is there a way to store an array of animations without onfinish being null?

let answers = {
       txtArray: Array.from(document.querySelectorAll('.answerTextSpans')),

       showTextAnims: [],

       showText: function () {

           for(let i = 0; i < this.txtArray.length; i++) {

               this.showTextAnims[i] = this.txtArray[i]
               .animate([{opacity: '0'},{opacity: '1'}],
                {duration: 500, iterations: 1, fill: 'forwards'});
           }
       } 
   }

//If I now type the following in the dev console...

answers.showTextAnims;

//I get an array of animations but the onfinish properties of each animation is null.