JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://test.vostrel.net/jquery.reel/jquery.reel.js"></script>
<link rel="stylesheet" href="http://test.vostrel.net/jquery.reel/example/style.css">
    <img src="http://test.vostrel.net/jquery.reel/example/object-movie-multi-row-sequence/mini.jpg" width="200" height="200"
      class="reel"
      id="image"
      data-images="http://test.vostrel.net/jquery.reel/example/object-movie-multi-row-sequence/mini/###.jpg"
      data-frames="20"
      data-frame="14"
      data-rows="6"
      data-row="3"
      data-speed="0.3">

    <div class="reel-annotation"
      id="first_row"
      data-start="1"
      data-end="20"
      data-x="10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105"
      data-y="10"
      data-for="image">
      First Row
    </div>
    <div class="reel-annotation"
      id="last_row"
      data-start="101"
      data-end="120"
      data-x="105,100,95,90,85,80,75,70,65,60,55,50,45,40,35,30,25,20,15,10"
      data-y="175"
      data-for="image">
      Last Row
    </div>

JavaScript

$( function () {
    $( "#image" ).on( "play", function () {
        var $self = $( this );
        setTimeout( function () {
            $self.trigger("stop");
        }, 10 );
    });
});