Is it possible to stop flipping?

[radke]

After initialization I change time on clock just by setTime() method and it works. Then after some conditions I run flip() method so clock starts flipping (animation). And then, again, after some other conditions I would like to stop flipping (no animation). How to get this?

regards, Radek

[objectivehtml]

Can you post a simple code example?

[radke]

var clock = $('#timer').FlipClock({
    clockFace: 'MinuteCounter',
    autoStart: false,
    countdown: true,
});

// and after this I start clock by:
clock.setTime( time );
if ( condition == 'I want animation' ) {
     clock.flip();
} else {
    // here some code to disable animation/flipping, previously started with clock.flip()
}

[objectivehtml]

Ok, so the new dev branch touches on a bigger issue. The autoStart previously did two things. 1, it would start the clock's internal counter. 2, it would start the animation. The new version changes this behavior in that autoStart only controls the clock's internal counter. The animation is now started (or not started) with another property.

You shouldn't use the flip() method unless you really have a reason to do so. In your case, you should use the start() method instead. To stop the clock use stop().

[radke]

Hi, if I understood it right, autoPlay now is responsible for flipping, and to make clock flipping from the beginning is easy, just autoPlay:true and that's all ( any start(), setFaceValue() take it into account ).

But, I'm not sure how to use it when I want to stop flipping? I try to initi like this:

var clock = new FlipClock($('#timer'), 0, {
    clockFace: 'MinuteCounter',
    clockFaceOptions: {
        autoPlay: false,    // no animation when later I use: clock.setFaceValue( time )
        autoStart: false,
        countdown: true
    }
});

// then:
clock.setFaceValue( time );    // works ok = value changed + no animation

// then:
clock.face.setOption('autoPlay', true);
clock.setFaceValue( time ); // doesn't take into account changed autoPlay = value changed + no animation
clock.face.start(); // now it will flip on next line (with animation)
clock.setFaceValue( time + 1 ); // begins to flip (BTW. clock is changed first to some strange number 99:99 or sth like 9x:xx)

clock.setFaceValue( time +1 ); // ok = value changed + animation
clock.face.setOption('autoPlay', false);
clock.face.stop();
clock.setFaceValue( time +1 ); // not good = value changed + flip (animation)

finally I don't know what to do to stop it flipping. I saw there is removePlayClass() method, but is never called..

[pj42]

Suggestion here https://github.com/objectivehtml/FlipClock/issues/175#issuecomment-326571095

[OldUnion]

Workaround using css

[objectivehtml]

This is an old thread, but I have just rewritten this library completely using ES6 syntax and removed jQuery. This feature should be even easier to implement now. I will assign this thread to myself and make sure it gets included in the version.

[tbone849]

@objectivehtml I am using the es6 branch and the countdown doesn't stop at 0, it just rolls into negative values.