Velocity is not defined

Question

I give up. How do I get Velocity defined. None of the examples show this, and correctly; it should be easy. I am attempting to use velocity version 1.2.3 without JQuery, (released nine days ago according to GitHub). I obtained the first version (an earlier one, 1.2.2) by direct download from GitHub to my webpage, then saved my webpage as velocity.js. The second one was obtained by going to https://github.com/julianshapiro/velocity, accessing velocity.js and saving it as Velocity123.js.

This test program was to help me get started working with velocity, but I cannot yet get there due to Velocity undefined situation, as reported by the webdeveloper/webconsole of FireFox v 40.0.3. The other FAQ instance of Velocity undefined seems to not apply since he was using an out-of-date version of JQuery. In the velocity1.2.3, I have seen the actual definition of Velocity, and I have sourced the file. I have tested the file definition by copying it and DIR-ing it in a shell after changing / to \, so how can it not be defined? The test code is:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Test1 Velocity</title>
        <meta charset="utf-8"/>
        <!-- Standard download from GitHub
           <script src="C:/Users/dbd/Documents/Library4thFloor/velocity.js"> 
           </script> 
        -->
        <!-- Suggested by wikipedia 
           <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js">
           </script> 
         -->
        <!-- manually included from github latest -->
        <script src="C:/Users/dbd/Documents/Library4thFloor/Velocity123.js"> 
        </script>
        <script type="text/JavaScript">
           function press(){
             alert("entered press");
             var idrect = document.getElementById("sq");
             alert("after idrect is set");
             Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});
             return false;
           } 
        </script>
    </head>
    <body>
        <h1>Sample SVG with Velocity</h1>
        <br>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
        <rect id="sq" 
              x="25" 
              y="25" 
              width="200" 
              height="200" 
              fill="lime" 
              stroke-width="4" 
              stroke="pink"
              onclick="press()"
        />
      </svg>
    </body>
    </html>

score 3 · Answer 1 · answered Oct 05 '15 at 05:44

3

A quick read of the velocity.js documentation shows what you're doing wrong. Velocity is used like other jQuery methods.

For example, if you wanted to make a div red then blue with 1000ms per animation:

$('div')
    .velocity({ backgroundColor: 'red' }, 1000)
    .velocity({ backgroundColor: 'blue' }, 1000)

answered Oct 05 '15 at 05:44

royhowie

10,605
14
45
66

According to my reading, the form you cite is only for use with JQuery. Without JQuery, the form, according to the documentation, changes to: – Daniel B. Davis Oct 06 '15 at 05:27
Sorry, I'm not yet fluent in stack-overflowspeak: it interrupted me mid-stream. As I was saying, for use without JQuery, the form changes to: Velocity( . { : }, { duration: ...etc. Thank you for trying. – Daniel B. Davis Oct 06 '15 at 05:31
I have discovered that the code submitted works OK under Chrome, but not under IE or FireFox. This changes the question to how it can work under FireFox. Somewhere in the documentation, it claims that Velocity is browser-independent; the various things one must add to account for the various browsers are not supposedly required with velocity. This seems to contradict that, but I expect all will become clear once it starts working everywhere. – Daniel B. Davis Oct 06 '15 at 05:36
@DanielB.Davis I was able to make your script work by replacing ` – royhowie Oct 06 '15 at 21:31
@DanielB.Davis here's a [gist](https://gist.github.com/royhowie/dfdfb94322f9cbe67f85). Note that velocity.js is in the same directory as velocity.html. – royhowie Oct 06 '15 at 21:35

score 0 · Answer 2 · answered Oct 16 '15 at 10:05

0

I use firefox, and this code works with Velocity 2.1.3:

Velocity(document.getElementById('elementId'), {property: 'value'}, time);

answered Oct 16 '15 at 10:05

inecrafter

47
7

score 0 · Answer 3 · answered Sep 14 '16 at 14:57

I tested your code in Firefox, albeit with velocity.js from a CDN, and it worked. Undefined errors notwithstanding, you might not even see your animation as you've set duration to 2ms. Try setting it to 2000ms.

Note that in HTML 5, you no longer need to provide the script attribute text/javascript. Also, it's not written with a capital J. Try and remove the attribute and see what happens.

score 0 · Answer 4 · answered Jun 20 '17 at 18:26

Try: jQuery.Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});

instead of: Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});

I was trying to mimic the staggered effect on this page (https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions) and kept hitting same Velocity is undefined error. Velocity's dependencies (http://velocityjs.org/#dependencies) indicates without jQuery present, $.Velocity now becomes Velocity. So with jQuery present, I reversed it, and it works.

Fwiw: for my app I'm using Vue for some parts, but jQuery is present for other event listeners and animations on the page, which is why I ran into this issue.

Velocity is not defined

4 Answers4