Single animation not working

[currenthandle]

Cool project thanks for this!

Goal: I am wanting to get my ascii text to animate, but only once. So noting shows, then the animation shows, and once the animation finishes (for the first time), it stays on the screen; static.

The fadeIn property doesn't seem to do anything for me. IDK what the originaly intent for fadeIn was; but I noticed that fadeIn wasn't documented in the read me. Maybe this was removed on purpose?

Here's a hacky work around I found: pass an array to text and set isPaused to a boolean state variable that you mutate in a useEffect after the first string in the array has finished animating using setTimeout.

export default function Banner() {
  const [paused, setPaused] = useState(false)

  useEffect(() => {
    setTimeout(() => {
      setPaused(true)
    }, 1000)
  }, [])

  const asciiTextRef = useAsciiText({
    animationCharacters: '▒ ░ █',
    font: ansiShadow,
    text: ['MY STRING', 'MT STRING'],
    fadeIn: true,
    animationDirection: 'down',
    isPaused: paused,
  })

  return (
    <div className='h-48'>
      <h1 className='text-z-red text-2xl'>
        <pre ref={asciiTextRef}></pre>
      </h1>
    </div>
  )
}

[samuelweckstrom]

Ok didnt think of this when writing the package, but will look into it. Using timeouts for this is way too hacky haha