Removing an Animation

[kerns]

Is there anyway to have an animation completed when moving to a new line? This is a great effect for a cache warmer I made, but it resembles a progress bar that has stalled...I would like to end on the last frame or else remove it entirely.

Is there a way to wipe the effect when moving to a new line?

[bokub]

Hi !

There is a little hack that you can use on this specific animation (karaoke)

// I suppose that you stored the animation in a variable called "animation"
const animation = chalkAnimation.karaoke(someString);

// When you want to "complete" your animation (after 1 second in my example)
setTimeout(() => {
    animation.stop(); // Stop the animation
    animation.f = someString.length + 10; // Set the frame manually to [string length + 10] (this is the hack! )
    animation.render(); // Render one last frame
}, 1000);

You can also replace your animation text with an empty string if you prefer...

animation.stop();
animation.replace('');

Tell me if it works for you! 👍

[kerns]

Thank you! Worked perfectly. There was a small glitch with the cookie accept message interfering on the very first iteration but I will just remove it and soldier on. It works now! Would be nice to see you fold this into the api.

https://gist.github.com/kerns/689fdea381a449c85abd37264bce5c2f