Skip to content
staticview

Text Flow Basic

Set value to animate text changes.

0

Code

The following example assumes that you have imported the component and set up the theme.

Basic Text Flow
<div class="text-flow-container">
  <sv-text-flow id="text-flow">0</sv-text-flow>


  <div>
    <button id="start-button" type="button" class="update-button">Start</button>
    <button id="stop-button" type="button" class="update-button">Stop</button>
  </div>


30 collapsed lines
  <script type="module">
    /** @type {HTMLButtonElement} */
    const startButton = document.querySelector("#start-button");


    /** @type {HTMLButtonElement} */
    const stopButton = document.querySelector("#stop-button");


    /** @type {TextFlow} */
    const textFlow = document.querySelector("#text-flow");


    /** @type {ReturnType<typeof setInterval> | undefined} */
    let intervalId;


    startButton.addEventListener("click", () => {
      if (intervalId) {
        clearInterval(intervalId);
        textFlow.value = 0;
      }


      intervalId = setInterval(() => {
        const currentValue = textFlow.value;
        textFlow.value = +currentValue + 1;
      }, 500);
    });


    stopButton.addEventListener("click", () => {
      clearInterval(intervalId);
    });
  </script>
</div>


<style>
7 collapsed lines
  .text-flow-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }


  sv-text-flow {
    --sv-anim-dur: 0.5s;


    &::part(text) {
      font-family: monospace;
      font-size: 2rem;
    }
  }


9 collapsed lines
  .update-button {
    padding: 0.5em 2em;
    margin-inline: 0.5em;
    color: var(--sv-accent-content);
    cursor: pointer;
    background-color: var(--sv-accent);
    border: none;
    border-radius: var(--sv-bdr-rad-md);
  }
</style>