AnimationPlayer.getPosition always returns zero

[marcusbelcher]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

AnimationPlayer.getPosition() always returns 0

Expected behavior

getPosition() should return the current 0% of the animation inferred in the API docs

Minimal reproduction of the problem with instructions

Create an Animation programatically such as:

createAnimation(){
  let a = this._builder.build([
    animate('1000ms', keyframes([
      style({ transform: 'translate3d(0px, 0px, 0px)', offset: 0.0 }),
      style({ transform: 'translate3d(100px, 0px, 0px)', offset: 1.0 }),
    ]))
  ]);
  this.animationPlayer = a.create(this.domNode);
  this.animationPlayer.play();
  setTimeout(this.pauseAnimation.bind(this), 500);//half animation time
}

pauseAnimation(){
  this.animationPlayer.pause();
  console.log(this.animationPlayer.getPosition());//excepting ~50 to be printed
}

Live example

Environment

Angular version: 4.3.6
@angular/cli: 1.3.2

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.1.4
- Platform:  Mac

[Sebastien-Guillon]

I can confirm this behavior, however this is how the method is written as of now: https://github.com/angular/angular/blob/4.3.6/packages/animations/src/players/animation_player.ts#L93

Same goes for the totalTime property, which is set to 0 and never changes.

[cutty201]

👎 Is there a timeline for when this functionality is going to be implemented?

-Matt

[dimitarrusev]

Any updates on this?

[soonwait]

i have found a way to hack this

      const myAnimation = this._builder.build(this.data.animations);
      let player = myAnimation.create(this._viewRef.element.nativeElement);

      // >>>>>>> next line needed <<<<<< 
      this.player = player._renderer.engine.players[player._renderer.engine.players.length - 1];

      this.player.onStart(() => console.log('started'))
      this.player.onDone(() => console.log('done'))
      this.player.init();

[SantiagoIlli]

It seems that this is not done yet.
Angular repo:
https://github.com/angular/angular/blob/master/packages/animations/src/players/animation_player.ts

getPosition(): number { return 0; }

We'll have to wait.

[literalpie]

At the very least, the documentation should be updated to note that the method does not work. Nothing's more frustrating than debugging your code only to find that the method is not implemented yet!

[tabuckner]

I would love to see this feature implemented. There is pretty big value in being able to get an idea of where we sit in the animation timeline.

[JoJk0]

Any update on the issue? It has been 2 years since this bug has been discovered.

[xiaojundebug]

Bug from three years ago🤪

https://github.com/angular/angular/blob/master/packages/platform-browser/animations/src/animation_builder.ts

[JoostK]

Hi folks, the fix for this issue (#39983) has landed in 11.0.4, thanks to @literalpie.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}