SOURCE

const input = $('input');
const container = $("#container");

function play(writer) {
    return new Promise((resolve) => {
        writer.animateCharacter({
            onComplete: () => {
                resolve();
            }
        });
    })
}
function chainWriters(writers) {
    return writers.reduce((p, writer) => p.then(() => play(writer)), Promise.resolve())
}

$('#btn').on('click', () => {
    const words = input.val().split('');
    console.log(words)
    container.empty()
    const writers = words.map((character) => {
        const itemDom = container.append('<div style="transform: rotate(180deg)"></div>');
        return HanziWriter.create(itemDom.get(0), character, {
            width: 50,
            height: 100,
            padding: 1,
            showOutline: false,
            showCharacter: false,
            delayBetweenStrokes: 300
        });
    });
    chainWriters(writers)

})

<div>
	<input id="input" />
</div>
<div>
<button id="btn">start</button>
</div>

<div id="container"></div>

#container {
    display: flex;
}