I'm trying to modify https://codepen.io/ninonuman/pen/ExporRG by adding an extra word but am having some difficulty doing so.

I added an extra <span class="word slide" data-splitting="chars">hello world</span> to the HTML and in the SCSS changed --duration: calc(var(--interval) * 4); to --duration: calc(var(--interval) * 5);. You can see the end result at https://codepen.io/neubert/pen/NWmvYLB.

The issue I'm having is that the transition between some of the words is not as smooth now. Like for a brief period of time two words will appear on top of one another. eg.

Any ideas as to how I might go about fixing this?

Thanks!