A simple example of animating an object on a canvas with controls: stop, play, pause.

[i-prikot]

https://jsfiddle.net/i_prikot/qugwjr48/

example.mp4

http://fabricjs.com/fabric-intro-part-2#animation

[Ivanca]

easing: fabric.util.ease[easing] ? fabric.util.ease[easing] : fabric.util.ease.linear,
The code doesn't take into account the easing, the _play function restarts the easing instead of resuming at the exact point where it was paused, perhaps fabric itself doesn't support such thing.

[i-prikot]

Hi.

Try to replace it with fabric.util.ease['easing'] ? fabric.util.ease['easing'] : fabric.util.ease.linear

The quotes are missing in the code.

[Ivanca]

It has nothing to do with that; I checked a bit deeper and the actual problem is that Fabric itself doesn't expose a way to change the value of 2 important variables inside the animate function: time and start, one would need to set the initial value of those 2 to truly restore an animation that you already aborted (because every easing function takes a value calculated using those as input, a float number between 0 and 1 called timePerc)

[ShaMan123]

@Ivanca we rewrote animation in v6. Aborting indeed ends the animation for good. But you can read the values I believe and start a new one with them. If not open an issue

[Ivanca]

@ShaMan123 I created a pull request that should fix the issue, of course I'm not familiar with the codebase so there might be a better way to implement the same change, also the PR doesn't include documentation nor examples, I don't have time to do that but hopefully the PR provides a good enough starting point.

https://github.com/fabricjs/fabric.js/pull/8802/files

[ShaMan123]

@i-prikot do you want this to be pinned instead of the other one?

[ShaMan123]

Sorry, I see it is different.
BTW v6 will not work on jsfiddle so I suggest using codesandbox (it should work out of the box but I am not sure) 'cause fabric needs a build step