Setting or disabling initial animation

I'm setting a Counter on a page and need it to start at a particular value and then countdown, but FlipClock.js insists on doing an initial animation, seemingly whenever a digit starts as a 0, it starts it as a 9 instead and flips over to 0, and it looks dumb in my context:

For example, when you do this:

clock = new FlipClock($('.clock'), 20, {
    clockFace: 'Counter'
});

It will initially appear as 19 and then flip up to 20, which, since I intend to count it down, looks really weird. Visually it then goes:

19, 20, 19, 18, 17, 16, ...

Which is jarring. It looks like it's gonna count up, and instead it counts down. Is there a way to make it not do that?

Example:

Note, this is an older version of the library (0.7.8) not the latest (0.8.0) and it behaves a little differently. It doesn't flip from 19 to 20, but from 20 to 20, which still looks odd and also the animation is way worse looking in this version, but it demonstrates the problem:

clock = new FlipClock($('.clock'), 20, {
  clockFace: 'Counter',
  countdown: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div class="clock"></div>

Solution

So the hacky way I got around this problem was to set a class on the div element with:

.wrapTimer {
    height: 0px;
    overflow:hidden;
}

Then only when I'm ready for the clock to start counting down, I remove the class causing the timer to appear already displaying 20. Simply hiding and showing the element doesn't work because it won't animate until it's visible.

This worked in Chrome at least, YMMV.