How can I create a dynamic animation for a winning score in JavaScript?
I'm looking to increase the target number incrementally when the game is won
Here's my code snippet:
let firstTarget = 0;
And here's the JSX code:
<div
style={{ backgroundColor: gameLost ? failureOp : gameWon ? successOp : 'lightgray' }}
ref={firstNodeRef}
className="inner-target-child"
>
<div id="counter" className="animated">
<ul className="digits luckie">
<li>{firstTarget}</li>
<li>{firstTarget + 1}</li>
<li>{firstTarget + 2}</li>
<li>{firstTarget + 3}</li>
</ul>
</div>
</div>
Additionally, here's the CSS code for the animation:
#counter {
height: 1em;
overflow: hidden;
}
.digits {
float:center;
list-style-type: none;
font-size: 1em;
line-height: 1em;
margin-top: 0em;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 2.2s;
animation-fill-mode: forwards;
}
.luckie {
animation-name: luckie;
}
/* Animations */
@keyframes luckie {
100% {
margin-top: -3em;
}
}