Disable flip animation?

[conor909]

trafficstars

I'm using the flip clock in 2 places on my website. I love the visual animation in one section, but in another section I'd like to just use the countdown functionality without the animation. I'v tried adding animation: none to some of the classes, but it didn't work. Is there an easy way to disable it in javascript?

[objectivehtml]

This is totally possible in the new version. I implemented this on a whim thinking somebody would need it and I am glad I did. Download the new dev branch. I don't have the docs updated publicly yet with the new docs, because the new version is a breaking change. So in the new version, do something like this:

clock = $('.clock').FlipClock({
        clockFace: 'DailyCounter',
        clockFaceOptions: {
            autoPlay: false
            // other options may go here
        }
});

Notice the new autoPlay property. autoStart now automatically starts the clock, and autoPlay automatically starts the animation. Previously this was all one single property and it just never worked as I intended and became a mess to maintain.

Let me know if this works for you.

[conor909]

Hi thanks for the reply, I had a chance to download the dev branch today but it seems it breaks the clock completely. Showing only a single [9] and flipping to [0], ending the animation.

[radke]

I will add here my 3 cents...

The animation touches performance problem. I'm using flip clock for counting down time in which user need to draw something.

And here we come to something like this:

https://www.dropbox.com/s/uxwj81vbwnhsr8r/Zrzut%20ekranu%202015-03-07%2009.22.48.png?dl=0

both circles are made using Wacom tablet with quite fast speed of drawing. On the left side with running clock, and on the right side without.

I'm wondering what can I do with this? Option 1. Changing flipClock to something else.. (which I wouldn't like) Option 2. Changing animation time (completly off or decrease flipping time? eg. flip in 0.3 sec, wait and again - how to get this? changing CSS?)

If new version comes with such functionality then when can I expect this new version?

Thanks, Radek

• BTW. for drawing on canvas I'm using paperjs.org stuff.

[niallthompson]

is the autoPlay function still included in the dev branch?

[maggsy78]

I know this is an old thread but the autoPlay option doesn't seem to do anything even though it's in the latest release and on the docs now. Should it work?

[obmelvin]

Is there any plan to fix the autoPlay? I tried messing with the CSS and just made it look even worse as I'm not familiar with CSS animations. Unfortunately, without this option working I will have to use another plugin as the animation makes my client feel sick.

[pj42]

This is how I solved it. I instantiate a new flipclock every second with autoStart switched off.

var date = new Date("September 25, 2017 09:00:00"); //Month Days, Year HH:MM:SS
(function(){
	var now = new Date();
	var diff = (date.getTime()/1000) - (now.getTime()/1000);
	var clock = $('.clock').FlipClock(diff,{
		clockFace: 'DailyCounter',
		countdown: true,
		autoStart: false
	});
	setTimeout(arguments.callee, 1000);
})();

[OldUnion]

Also you can disable all styles related to ul.play. I'm not familiar with CSS animations but this fix works for me.

.flip-clock-wrapper ul.play li.flip-clock-active .down {
    z-index: 2;
    -webkit-animation: unset !important;
    -moz-animation: unset !important;
    animation: unset !important;
}

.flip-clock-wrapper ul.play li.flip-clock-active {
    -webkit-animation: unset !important;
    -moz-animation: unset !important;
    animation: unset !important;
    z-index: 5;
}

.flip-clock-wrapper ul.play li.flip-clock-before .up {
    z-index: 2;
    -webkit-animation: unset !important;
    -moz-animation: unset !important;
    animation: unset !important;
}

/* SHADOW */

.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
    background: inherit !important;
    -webkit-animation: unset !important;
    -moz-animation: unset !important;
    animation: unset !important;
}

.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
    background: inherit !important;
    -webkit-animation: unset !important;
    -moz-animation: unset !important;
    animation: unset !important;
}

/*DOWN*/

.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
    background: inherit !important;
    -webkit-animation: unset !important;
    -moz-animation: unset !important;
    animation: unset !important;
}

.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
    background: inherit !important;
    -webkit-animation: unset !important;
    -moz-animation: unset !important;
    animation: unset !important;
}