-
-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Open
Labels
Description
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
- In Safari 26.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.
Reactions are currently unavailable