Smooth animation while keeping in time

[AppwareDev]

Hi, I have a pretty basic implementation of your module; countdown timer using interval every 1000 milliseconds which updates the current variable. I require a smooth animation so I have duration= "1000" however when I start the timer it takes 1000 milliseconds for the animation to begin and at the end of the timer I see zero before the progress bar has completed.

Is there someway to offset this behaviour so that the animation is smooth yet in time with the progress of the timer? I'm probably just being thick here but I can't figure it out!

Thanks

[crisbeto]

If you're using an easing function (which is the default), it's probably slowing down a lot towards the end. You can make it decrease consistently by setting animation="linearEase".

[AppwareDev]

Thanks but I already have that property set.

[crisbeto]

Hmm, ok, in that case it might be easier with a code sample/codepen. Are you doing something like counting down to 1 minute by decrementing every 1000ms?

[AppwareDev]

Codepen (I pinched the template from another issue to save time, sorry!)

Tap the timer to start/reset. As you'll see, the progress bar does not begin for 1000 milliseconds and ends 1000 milliseconds too late.

[crisbeto]

That's because it uses $interval (which is an Angular wrapper around setInterval) which won't fire the first time until 1 second after it was initiated. E.g. check how long this takes to start firing in your browser console:

setInterval(function(){
  console.log('ding');
}, 5000);

[AppwareDev]

Of course. I knew it was something stupid. All sorted now, thanks and sorry for wasting your time!

[crisbeto]

No problem, you're welcome.