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>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>