diff --git a/docs/configuration/animations.md b/docs/configuration/animations.md
index 7000f125f6c..36ac0e7c11c 100644
--- a/docs/configuration/animations.md
+++ b/docs/configuration/animations.md
@@ -252,14 +252,17 @@ The callback is passed the following object:
```javascript
{
- // Chart object
- chart: Chart,
+ // Chart object
+ chart: Chart,
- // Number of animations still in progress
- currentStep: number,
+ // Number of animations still in progress
+ currentStep: number,
- // Total number of animations at the start of current animation
- numSteps: number,
+ // `true` for the initial animation of the chart
+ initial: boolean,
+
+ // Total number of animations at the start of current animation
+ numSteps: number,
}
```
diff --git a/docs/samples/.eslintrc.yml b/docs/samples/.eslintrc.yml
new file mode 100644
index 00000000000..b4e00d7d230
--- /dev/null
+++ b/docs/samples/.eslintrc.yml
@@ -0,0 +1,2 @@
+rules:
+ no-console: "off"
diff --git a/docs/samples/advanced/progress-bar.md b/docs/samples/advanced/progress-bar.md
index 26c4675ca13..1ba5554dbaf 100644
--- a/docs/samples/advanced/progress-bar.md
+++ b/docs/samples/advanced/progress-bar.md
@@ -1,5 +1,11 @@
# Animation Progress Bar
+## Initial animation
+
+
+
+## Other animations
+
```js chart-editor
@@ -67,6 +73,7 @@ const actions = [
//
//
+const initProgress = document.getElementById('initialProgress');
const progress = document.getElementById('animationProgress');
const DATA_COUNT = 7;
@@ -99,11 +106,19 @@ const config = {
options: {
animation: {
duration: 2000,
- onProgress: function(animation) {
- progress.value = animation.currentStep / animation.numSteps;
+ onProgress: function(context) {
+ if (context.initial) {
+ initProgress.value = context.currentStep / context.numSteps;
+ } else {
+ progress.value = context.currentStep / context.numSteps;
+ }
},
- onComplete: function() {
- //
+ onComplete: function(context) {
+ if (context.initial) {
+ console.log('Initial animation finished');
+ } else {
+ console.log('animation finished');
+ }
}
},
interaction: {
@@ -124,5 +139,6 @@ const config = {
module.exports = {
actions: actions,
config: config,
+ output: 'console.log output is displayed here'
};
```
diff --git a/src/core/core.animator.js b/src/core/core.animator.js
index 32d2934f20e..aab04e01881 100644
--- a/src/core/core.animator.js
+++ b/src/core/core.animator.js
@@ -26,6 +26,7 @@ export class Animator {
callbacks.forEach(fn => fn({
chart,
+ initial: anims.initial,
numSteps,
currentStep: Math.min(date - anims.start, numSteps)
}));
@@ -95,6 +96,7 @@ export class Animator {
if (!items.length) {
anims.running = false;
me._notify(chart, anims, date, 'complete');
+ anims.initial = false;
}
remaining += items.length;
@@ -116,6 +118,7 @@ export class Animator {
if (!anims) {
anims = {
running: false,
+ initial: true,
items: [],
listeners: {
complete: [],