I am following the instructions from http://gooy.github.io/aurelia-animator-velocity/#/ since I assume this is similar code (looks it to me).

I have registered the plugin

 .plugin("aurelia-animator-velocity");

I added au-animatate and anim-enter and anim-leave to the first element below the template element - example below

<template>
  <section class="au-animate" anim-enter="transition.slideRightBigIn;{duration:2000}" anim-leave="transition.slideRightBigOut;{duration:2000}">

Something is happening but it looks like, irrespective of what I try, only the default fadeIn and fadeOut animation is working and the options are largely ignored. The velocity pack is being loaded as far as I can see.

I'm submitting a bug report

• Library Version:
  1.0.1

Please tell us about your environment:

• Operating System:
  Any

• Node Version:
  6.2.0

• NPM Version:
  3.8.9

• JSPM OR Webpack AND Version
  webpack 2.2.0

• Browser:
  all

• Language:
  ESNext

Current behavior:
Executing this.animator.enter(this.view_self, 'customAnimation'); will always throw an Error due to:

https://github.com/aurelia/animator-velocity/blob/master/src/animator.js#L310-L326

Apparently, there's an unclear section of code in the _runElementAnimation(element:HTMLElement, name:string, options:any = {}, eventName:string = undefined): Promise<any> function, which restricts the custom function names to ONLY :enter and :leave.

Expected/desired behavior:
The effect name parameter should be checked against effects map instead and then should the error be thrown.

Tried to use the .d.ts using typings but it won't compile - doesn't recognize velocity-animate module.

import velocity from 'velocity-animate';

I tried to include the velocity-animate.d.ts file in the project but the file does not include a declaration of the module - only extensions to JQuery.

There is no particular reason to include the line above - suggest removing it.

I'm submitting a bug report

Library Version: 0.17.0
Operating System: Windows 10
Node Version: 6.2.0
NPM Version: 3.8.9
Browser: Chrome
Language: TypeScript

As I migrated my project from Aurelia JSPM to the CLI I can no longer get Aurelia Velocity working. Below is the exact sequence, from scratch, that produces error (Also below). Aurelia with Velocity animations is really awesome, but I am really stuck on this problem.

Create Aurelia CLI project and then execute bash commands:
au new - Custom/Typescript/Sass/No Test/VSCode
npm install aurelia-animator-velocity --save
typings install dt~velocity-animate --save --global

Add dependencies into aurelia.json:
"velocity-animate",
{
"name": "aurelia-animator-velocity",
"path": "../node_modules/aurelia-animator-velocity/dist/amd",
"main": "aurelia-animator-velocity"
}

Add code to app.ts to bring in aurelia-animator-velocity:
import {VelocityAnimator} from "aurelia-animator-velocity";

Comment out below in aurelia-animator-velocity.d.ts (Separate Issue):
//import velocity from 'velocity-animate';

Running "au build" produces error below. The current issue is the path to velocity.ui.js should not contains src. Not sure if this a CLI issue or a velocity.ui.js path issue within animator-velocity.

...
Tracing aurelia-animator-velocity...
{ uid: 8,
  name: 'writeBundles',
  branch: false,
  error:
   { Error: ENOENT: no such file or directory, open 'C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\src\node_modules\velocity-animate\velocity.ui.js'
       at Error (native)
       at Object.fs.openSync (fs.js:634:18)
       at Object.fs.readFileSync (fs.js:502:33)
       at Object.exports.readFileSync (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\file-system.js:38:13)
       at amodroTrace.fileRead (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\bundled-source.js:83:31)
       at Object.context.fileRead (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:176:18)
       at Object.context.load (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:357:30)
       at Object.Module.load (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:832:29)
       at Object.Module.fetch (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:822:66)
       at Object.Module.check (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:854:30)
     errno: -4058,
     code: 'ENOENT',
     syscall: 'open',
     path: 'C:\\Users\\...\\Documents\\Visual Studio 2015\\Projects\\Web\\AureliaVelocityWebsite\\node_modules\\velocity-animate\\velocity\\velocity.ui.js',
     moduleTree: [ 'aurelia-animator-velocity' ],
     fileName: 'C:/Users/.../Documents/Visual Studio 2015/Projects/Web/AureliaVelocityWebsite/node_modules/aurelia-animator-velocity/dist/amd/aurelia-animator-velocity.js' },
  duration: [ 2, 545471137 ],
  time: 1470870577009 }

I'm submitting a bug report

• Library Version:
  1.0.1

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  6.2.0

• NPM Version:
  3.8.9

• JSPM OR Webpack AND Version
  webpack 2.1.0-beta.17

• Browser:
  all

• Language:
  ESNext

Current behavior:
parseJSObject() function does not handle inline arrays correctly.

anim-enter="{ height: [200, 0], opacity: [1, 0] }" will be split by commas (,) and the resulting array will be a complete mess (instead of the expected key-value pairs).

Expected/desired behavior:
Force-feeding should be possible inline.

I'm submitting a bug report

• Library Version:
  1.1.0

Please tell us about your environment:

• Operating System:
  Windows 8

• Node Version:
  6.9.2

• NPM Version:
  4.3.0

• JSPM OR Webpack AND Version
  Aurelia CLI 0.30.1

• Browser:
  Chrome 60

• Language:
  TypeScript 2.4.2

Current behavior:

1. Create a project with au new.
2. Add aurelia-animator-velocity as described here.

main.ts

import { Aurelia } from 'aurelia-framework'
import environment from './environment';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-animator-velocity', instance => {
      instance.enterAnimation.options.duration = 1000;
      instance.leaveAnimation.options.duration = 1000;
    })
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}

app.ts

export class App {
  private toggle = true;
  private items = [];

  constructor() {
    for (let i = 0; i < 5; i++) {
      this.items.push('item ' + i);
    }
  }
}

app.html

<template>
  <input type="checkbox"
    id="chk"
    checked.bind="toggle">
  <label for="chk">toggle</label>
  <div>
    <div class="au-animate"
      if.bind="toggle">
      <div repeat.for="item of items"
        class="au-animate">${item}</div>
    </div>
  </div>
</template>

4. au run, load page, see "toggle" checkbox and list of 5 items. Click "toggle" checkbox twice under one second. The list is not shown and error in browser console:

Uncaught TypeError: Cannot read property 'item' of null
    at vendor-bundle.js:24268
    at ArrayRepeatStrategy.instanceChanged (vendor-bundle.js:24322)
    at Repeat.itemsChanged (vendor-bundle.js:23983)
    at Repeat.bind (vendor-bundle.js:23948)
    at Controller.bind (vendor-bundle.js:22055)
    at View.bind (vendor-bundle.js:20059)
    at If._runValueChanged (vendor-bundle.js:23746)
    at If.valueChanged (vendor-bundle.js:23701)
    at BehaviorPropertyObserver.selfSubscriber (vendor-bundle.js:22299)
    at BehaviorPropertyObserver.call (vendor-bundle.js:22165)
    at BehaviorPropertyObserver.setValue (vendor-bundle.js:22145)
    at If.descriptor.set [as value] (vendor-bundle.js:22254)
    at Object.setValue (vendor-bundle.js:9552)
    at Binding.updateTarget (vendor-bundle.js:10793)
    at Binding.call (vendor-bundle.js:10808)
    at SetterObserver.callSubscribers (vendor-bundle.js:6303)

Expected/desired behavior:

No error. List is shown.

When running jspm install aurelia-animator-velocity this message is displayed:

warn github:julianshapiro/[email protected] dependency installs skipped as it's a GitHub package with no registry property set.
     If the dependencies aren't needed ignore this message. Alternatively set a registry or dependencies override or use the npm registry version at jspm install npm:velocity-animate@^1.2.3 instead.

This results in velocity not being installed and the plugin not working. Would it be possible to depend on the npm package instead?

What is the intended use of this animator?

Right now if you try to use this as the only animator in the application you lose out of any templating features that make use of addClass or removeClass from the abstract Animator.

Is this implementation just missing those methods or is there some mixture of animators that should coexist?

I'm submitting a bug report

• Library Version:
  1.1.0

Please tell us about your environment:

• Operating System:
  OSX 10.12.4

• Node Version:
  7.3.0

• NPM Version:
  3.10.10

• JSPM OR Webpack AND Version
  JSPM 0.16.52

• Browser:
  all

• Language:
  ESNext

Current behavior:
Simply using the Velocity animator in the following manner causes my transient view to remain in memory when navigating away (where this problem does not occur when I remove calls to the animator):

this.animator.animate(document.getElementById('recoveryErrorBox'), 'callout.shake');

I can actually recreate the problem at will by simply commenting any calls to the animator, and then uncommenting. But apart from the memory leak, everything works correctly.

Also, I should point out that I'm not using the declarative approach to animations at all. All animation is handled in the viewModel.

I believe the problem to be that there is no Velocity-oriented destroy method to call on the nodes involved in animation, and simply letting detach() do its thing is failing (the DOM nodes involved in animation remain).

DIAGNOSTIC STEPS TAKEN

1. Rewound all the way to the point of simply importing and injecting the VelocityAnimator to see if the mere presence of it in the viewModel was the culprit. Not the case.

2. I was calling animations in a task added to the taskQueue as a microTask, which led me to believe that I had a closure issue. I unwrapped the animation calls so that they were not being called from a microTask. It appears that calling from a microTask is not a factor in this memory leak.

3. Calling this.animator.animate(...) from anywhere within the viewModel--whether from within a microTask or not--was, in fact, the culprit.

Expected/desired behavior:

• What is the expected behavior?
  The VelocityAnimator should not be stranding DOM nodes so that they cannot be removed by Aurelia.

If the VelocityAnimator does require specific steps in the detach() handler, some guidance would be helpful.

Animator is loading - effects are not. Error shown below.

Velocity UI Pack: Velocity must be loaded first. Aborting.

velocity/velocity.ui is being loaded before velocity is being loaded.

This is from a bundle but I suspect the same will happen unbundled.