@platform/util.animate

util.animate

Physics based animation. Uses dynamics.js under the hood.

Setup

yarn add @platform/util.animate

Usage

Within a React component:

private animate(target: { value1: number; value2: number }) {
  this.stop$.next();  // Stop currently executing animation (if any).
  const current = () => this.state;
  const duration = 200;
  animation
    .start({ target, current, duration, type: 'easeInOut' })
    .pipe(takeUntil(this.stop$))
    .subscribe({
      next: data => this.setState(data as any),
      complete: () => {
         // Done.
      },
    });
}