How transform one letter into another with animation

Question

I'd like to have some text, suppose a classic "hello world" to be transformed into some other string like, randomly, "thank you". I'd like it to be done with some animation that disassemble the lines of the letter and reassemble them as the new word/sentence I need. I was wondering if there is some library that can do that or if I can do something like that only with animated svg. In this case, have you got any suggestions?

I would like to use this to write something in English and transform the words in Korean alphabet.

I've been looking on the web, but I'm finding only the classical text transform animation of css or text rotations etc.

Even if it is a silly example, the result expected can be something similar to this url here: http://seoi.net/penint/

Answer 1

Check If, this is what you are looking for

 var ml4 = {}; ml4.opacityIn = [0, 1]; ml4.scaleIn = [0.2, 1]; ml4.scaleOut = 3; ml4.durationIn = 800; ml4.durationOut = 600; ml4.delay = 500; anime.timeline({ loop: false }).add({ targets: '#letter', opacity: ml4.opacityIn, scale: ml4.scaleIn, duration: ml4.durationIn }); function changeText() { document.getElementById('letter').innerHTML = document.getElementById('letterInput').value; anime.timeline({ loop: false }).add({ targets: '#letter', opacity: ml4.opacityIn, scale: ml4.scaleIn, duration: ml4.durationIn }); } 

 .ml4 { position: relative; font-weight: 900; font-size: 4.5em; } .ml4 .letters { position: absolute; margin: auto; left: 0; top: 0.3em; right: 0; opacity: 1; } 

 <input type="text" id="letterInput" value="Thank you" /> <button onclick="changeText()">Click Me</button> <h1 class="ml4"> <span class="letters" id="letter">Hello World</span> </h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>