Velocity: First Argument was not a property map

Question

I am using Velocity to do some animations (without jQuery), and I am having an issue where I get the following error:

Velocity: First argument ([object HTMLDivElement]) was not a property map, a known action, or a registered redirect. Aborting.

I have looked at other examples, and they seem to do it the same way I do, and thiers works. Why is mine not working?

When I dump out the value of rev.elem I get a HTMLDivElement

Velocity(rev.elem, 'slideUp', {
    duration: 225,
    queue: false,
    easing: 'easeInOutQuad'
});

This guy seems to use it the same way and it works for him:
http://jasonweaver.name/blog/velocity-js-vertical-slide-without-jquery

Answer 1

I have got the example of this up and running...

The example is based on Jason Weaver's original example but has been updated to the latest version of Velocity and has the PUG syntactical error fixed.

  var el = document.querySelector(element), // cache click target
    con = document.querySelector(container), // cache container target
    up = 'slideUp', // store up command
    down = 'slideDown'; // store down command

  el.addEventListener('click', function(event) {

    var active = el.classList.contains('active'); // store active state
    el.classList.toggle('active'); // toggle click target active

    Velocity(con, active ? up : down, { // test and init command
      duration: duration, // duration set in function call params
      easing: easing // easing set in function call params
    });

    event.preventDefault();

});

Answer 2

You need to import both "velocity" and "velocity ui":

<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.ui.min.js"></script>

Answer 3

If you're using the beta Velocity V2 then this won't work yet - I removed the shortcuts such as this in favour of an extensible API - I'm working on sequences right now and will return to this answer when they are in there (within the next few weeks).

Answer 4

I got it to work by importing both velocity and velocity ui:

import Velocity from 'velocity-animate';
import 'velocity-animate/velocity.ui';