I want to iterate through a list of checkboxes, selecting them one at a time, wait for the animation to finish, verify some changed values and so on.

This is what I have so far. It doesn't work because the driver keeps clicking the boxes whereas the animation hasn't finished. How do I click, wait, verify, repeat? (preferably without async library, just using webdriverio). I've seen some examples that wait for element to appear etc. However, in my case, some visual state change happens which is harder to track. I'd just prefer to insert a pause.

client.elements('.chk-box', function(error, result){
    result.value.forEach(function(box, index){
        client.elementIdClick(box.ELEMENT, function(){
            client.pause(1000);
            verifyLoadedData(index);
        });
    })
});