CSS/JS/HTML Scrolling Twitch Menu

[R1ZLaUK]

Hi,

I think this may get flagged as the wrong section, as the help I require is part CSS part JS and part HTML. But hopefully somebody can help.
I have a Twitch sort of plugin that gives a 'end of movie, roll credits' effect when I end the stream but I can't seem to get it just right. As it stands at the minute, it loops, but I need it to play once only and also have a footnote/footer after the effect has played.

Here is the 3 parts of the code;

* {
      font-family: '{{fontName}}', sans-serif;
      color: {{fontColor}};
      font-size: {fontSize}px;
    overflow: hidden;
      box-sizing: border-box;
      text-align: center;
      letter-spacing: 1.3px;
      line-height: 1.5;
}

h1 {
     font-size: {titleSize}px;
      text-transform: uppercase;
      margin: 0 0 15px;
}
h2 {
    font-size: {headerSize}px;

      text-transform: uppercase;
      margin: 0 0 15px;
}
h3 {
     font-size: 30px;
      line-height: 40px; 
      margin: 0 0 15px;
}

.credits-container {
    width: 100%;
    height: 100%;
      overflow: hidden;
      position: relative;
}
.credits-container__scroll {
     position: absolute;
     transform: translate(0, 100%);
      min-height:100%;
      left: 0; right: 0;
}
.credits-container__scroll2 {
     position: absolute;
     transform: translate(0, 100%);
      min-height:100%;
      left: 0; right: 0;
      animation-delay: calc(50s / {{speed}}) !important;
}
.scrollIt{
  animation: scrollIt linear infinite;
  animation-duration:calc(100s / {{speed}});
}
@keyframes scrollIt {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, -100%);
  }
}

.credits-header {
    margin-bottom: 20px;
}
.credits-header p {
      font-size: 16px;
      line-height: 1.8; 
}

.credits-sections {

}
.credits-sections__item {
    margin-bottom: 100px;
    display: none;
}

.people-list {
    margin: 0;
      padding: 0;
      list-style: none;
      display: none;
      flex-wrap: wrap;
}
.people-list__item {
    flex: 1 1 100%;
    padding: 10px 0;
    font-size: 20px;
}
.col2 .people-list__item {
     flex-basis: 50%;
}
.col3 .people-list__item {
     flex-basis: 33.3%;
}
.col4 .people-list__item {
     flex-basis: 25%;
}

HTML Part;

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://fonts.googleapis.com/css?family={{fontName}}" rel="stylesheet">
<div class="credits-container" id="app">
      <div class="credits-container__scroll scrollIt">
        <div class="credits-header">
            <h1>{{title}}</h1>
            <h2>{{subtitle}}</h2>
        </div>
 
        <div class="credits-sections">
            <div class="credits-sections__item">
                <h2>{{subLabel}}</h2>   
                  <!-- If you have a ton of events in one section, you can
                     split them up into columns by adding a "col2",
                     "col3" or "col4" classes - example below: -->
                <ul class="people-list col{{columns}} subscriber"></ul>
            </div>
          
            <div class="credits-sections__item">
                <h2>{{followLabel}}</h2>   
                <ul class="people-list col{{columns}} follower"></ul>
            </div>
          
            <div class="credits-sections__item">
                <h2>{{tipLabel}}</h2>
                <ul class="people-list col{{columns}} tip"></ul>
            </div>   

            <div class="credits-sections__item">
                <h2>{{cheerLabel}}</h2>   
                <ul class="people-list col{{columns}} cheer"></ul>
            </div>             
        </div>
     </div>
      <div class="credits-container__scroll2 scrollIt">
        <div class="credits-header">
            <h1>{{title}}</h1>
            <h2>{{subtitle}}</h2>
        </div>

        <div class="credits-sections">
            <div class="credits-sections__item">
                <h2>{{subLabel}}</h2>   
                  <!-- If you have a ton of events in one section, you can
                     split them up into columns by adding a "col2",
                     "col3" or "col4" classes - example below: -->
                <ul class="people-list col{{columns}} subscriber"></ul>
            </div>
          
            <div class="credits-sections__item">
                <h2>{{followLabel}}</h2>   
                <ul class="people-list col{{columns}} follower"></ul>
            </div>
          
            <div class="credits-sections__item">
                <h2>{{tipLabel}}</h2>   
                <ul class="people-list col{{columns}} tip"></ul>
            </div>   

            <div class="credits-sections__item">
                <h2>{{cheerLabel}}</h2>   
                <ul class="people-list col{{columns}} cheer"></ul>
            </div>             
        </div>
     </div>
</div>

JavaScript Part;

// This custom widget is extremally generic when it comes to the way
// it looks. If you like the default style - great! If you don't, you
// might need some CSS skills to tailor it to your needs.


// !!!!!!!!!!
// DO NOT EDIT ANYTHING BELOW THIS LINE (unless you know what youre doing)
// !!!!!!!!!!

let totalEvents = 0, fSum = 0, sSum = 0, cSum = 0, tSum = 0;

window.addEventListener('onWidgetLoad', function (obj) {
    const recents = obj.detail.recents;
    let session = obj.detail.session.data;
    if (typeof session['follower-session'] === "undefined") session['follower-session'] = {count: 0};
    if (typeof session['subscriber-session'] === "undefined") session['subscriber-session'] = {count: 0};
    if (typeof session['cheer-session'] === "undefined") session['cheer-session'] = {amount: 0};
    if (typeof session['tip-count'] === "undefined") session['tip-count'] = {count: 0};
    
      let fieldData = obj.detail.fieldData;
    userCurrency = obj.detail.currency;

      console.log(obj.detail.session);
      console.log(recents);
 
    for (eventIndex in recents) {
        const event = recents[eventIndex];
        if (!fieldData[`enable${event.type}`]) continue;

        if (event.type === 'follower') {
            if (fSum < session['follower-session']['count']) {
                addEvent('follower', event.name);
                fSum += 1;
            }
        } else if (event.type === 'subscriber') {
            if (sSum < session['subscriber-session']['count']) {
                addEvent('subscriber', event.name);
                sSum += 1;
            }
        } else if (event.type === 'cheer') {
            if (cSum < session['cheer-session']['amount']) {
                addEvent('cheer', event.name + " - " + event.amount);
                cSum += event.amount;
            }
        } else if (event.type === 'tip') {
            if (tSum < session['tip-count']['count']) {
                addEvent('tip', event.name + " - " + event.amount + '' + userCurrency.symbol);
                tSum += 1;
            }
        }
    }

});

function addEvent(type, entry) {

    const element = `<li class="people-list__item">${entry}</li>`

    $('.' + type).append(element)
    $('.' + type).css('display', 'flex');
    $('.' + type).closest('.credits-sections__item').css('display', 'block');
}

I've tried trial and error for a few hours with lacking knowledge and came here in the hope somebody with the required skill could either, help me understand it and do it myself, or do it for me and I can get back to not messing about with stuff I don't know how to do!

Thanks

Rizla