Skip to content

[BUG] Text Scramble Animation Issue #1137

@nikeokoronkwo

Description

@nikeokoronkwo

Describe the bug

I am unable to make a text randomizer/scrambling animation using animejs's animate and splitText, as animations run only once by default, even when using callback syntax.

In my app I tried the following:

animate(chars, { 
   innerHTML: () => characterSet[Math.floor(Math.random() * characterSet.length)], // also tried with animejs random select util
   duration: 100,
   loop: 7,
   delay: stagger(100, { from: "random", start: 0 }),
});

But the text would only animate once.

The loop triggered when I added an opacity option, but it was also buggy, as the text wouldn't animate.

animate(chars, { 
   opacity: ['100%', '0%', '100%'],
   innerHTML: () => characterSet[Math.floor(Math.random() * characterSet.length)], // also tried with animejs random select util
   duration: 100,
   loop: 7,
   delay: stagger(100, { from: "random", start: 0 }),
});
Screen.Recording.2026-01-27.at.7.12.10.PM.mov

I also tried using onUpdate for setting the text, but it was also buggy (the animation wouldn't stop as needed, even with a finite number of loops).

Reproduction

https://codepen.io/nikeokoronkwo/pen/zxBpvpy

  1. In Safari 26.2
  2. Open this demo

Expected Behavior

Text would animate given number of times in loop and text would scramble visibly.

Actual Behavior

Text only animates once.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions