'Simple play/pause CSS animation button with switching icon

Could anyone help me by adding a simple play/pause button to my text scrolling animation?. I need the button to work as an icon only using <i class="fa-regular fa-circle-play"></i> and <i class="fa-regular fa-circle-pause"></i> but display only one icon at a time according to the animation state.

I'm using the js code for flipping from @guradio

// for selecting the input field on clicking over the flip text 
    function selectText() {
      const input = document.getElementById('searchInput');
      input.focus();
      input.select();
    }

// for flipping the text
    $('#searchInput').keyup(function() {
      if ($(this).val().length == 0) {
        $('#text-flip').show();
      } else {        
        $('#text-flip').hide();
      }
    }).keyup();
        #text-flip {
        height:20px;
        overflow:hidden;
        margin-top: -20px;
        }

        #text-flip > div > div {
        color: rgb(43, 43, 43);
        padding-left: 60px;
        height:45px;
        margin-bottom:45px;
        display:inline-block;
        font-size: inherit
        }

        #text-flip div:first-child {
        animation: show 10s linear infinite;
        }
            
        @keyframes show {
        0% {margin-top:-270px;}
        5% {margin-top:-180px;}
        33% {margin-top:-180px;}
        38% {margin-top:-90px;}
        66% {margin-top:-90px;}
        71% {margin-top:0px;}
        99.99% {margin-top:0px;}
        100% {margin-top:-270px;}        
        }
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <form action="#" method="get">        
      <input id="searchInput" placeholder="Search: "/>

      <div id="text-flip" onclick="selectText()">
          <div><div>Third Text</div></div>
          <div><div>Second Text</div></div>
          <div><div>First Text</div></div>
      </div>        
  </form>
javascripthtmlcss


Solution 1:[1]

I updated your code.

let isPlayed=true;
    
// for flipping the text
$('#searchInput').keyup(function() {
      if ($(this).val().length == 0) {
        $('#text-flip').show();
      } else {        
        $('#text-flip').hide();
      }
    }).keyup();
function btnClicked() {
    if(isPlayed)
       $(".controlBtn").html("<i class='fa-solid fa-circle-play' onclick='btnClicked()'></i>");
    else
       $(".controlBtn").html("<i class='fa-solid fa-circle-pause' onclick='btnClicked()'></i>");
    $("#text-flip div:first-child").toggleClass("flip-animation");
    isPlayed = !isPlayed;
 }
 function selectText() {
    const input = document.getElementById('searchInput');
    input.focus();
    input.select();
 }
#text-flip {
        height:20px;
        overflow:hidden;
        margin-top: -20px;
        }

        #text-flip > div > div {
            color: rgb(43, 43, 43);
            padding-left: 60px;
            height:45px;
            margin-bottom:45px;
            display:inline-block;
            font-size: inherit
        }

        #text-flip div:first-child {
            animation: show 10s linear infinite;
        }
            
        @keyframes show {
           0% {margin-top:-270px;}
           5% {margin-top:-180px;}
           33% {margin-top:-180px;}
           38% {margin-top:-90px;}
           66% {margin-top:-90px;}
           71% {margin-top:0px;}
           99.99% {margin-top:0px;}
           100% {margin-top:-270px;}        
        }
        .controlBtn {
            margin-top: 10px;
        }
        #text-flip div.flip-animation:first-child {
            animation-play-state: paused !important;
         }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <form action="#" method="get">        
      <input id="searchInput" placeholder="Search: "/>

      <div id="text-flip" class="flip-animation" onclick="selectText()">
          <div><div>Third Text</div></div>
          <div><div>Second Text</div></div>
          <div><div>First Text</div></div>
      </div>        
  </form>
  <div class="controlBtn"><i class="fa-solid fa-circle-pause" onclick="btnClicked()"></i></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions