Velocity: The initial parameter was not recognized as a property mapping

I've been experimenting with Velocity for animations (without jQuery), but I'm running into an issue where I keep getting this error message:

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

After looking at other examples, it seems like they're doing it the same way I am, and theirs are working fine. Why isn't mine?

When I check the value of rev.elem, it returns as a HTMLDivElement

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

This person is using it in a similar way and it's working for them:

javascripttypescriptvelocity.js

Answer №1

After some trial and error, I was able to successfully make it work by importing both velocity and velocity ui:

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

Answer №2

For users of the beta Velocity V2, please note that the function mentioned will not currently work as I have made changes to optimize the API for greater flexibility. I am currently focused on implementing sequences, but plan to revisit this issue within the coming weeks.

Answer №3

I successfully managed to get this example up and running...

This particular example is a modified version of Jason Weaver's original code, updated to work with the latest Velocity version and correcting the PUG syntactical error.

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

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

    var active = el.classList.contains('active'); // define active state
    el.classList.toggle('active'); // toggle click target's activity status

    Velocity(con, active ? up : down, { // check and initialize command
      duration: duration, // set duration defined in function parameters
      easing: easing // set easing defined in function parameters
    });

    event.preventDefault();

});

Answer №4

Ensure you are importing both the "velocity" and "velocity ui" libraries:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e535042414d575a57434608545142444651506b74446b1c">[email protected]</a>/velocity.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c7d4ddded2d8c5c89cdf99d1c3d9ccd49cd1dfdccbddcbecefdabd8ededebf3">[email protected]</a>/velocity.ui.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Has the rotation of the model been altered?

Is there a way to detect if the rotation of a model has changed? I've attempted: var oldRotate = this._target.quaternion; console.log('works returns vector3 quaternion: ', oldRotate); var newRotate = oldRotate; if (oldRotate != ...

javascriptthree.js

excessive load on Array parameter

As a fervent Python enthusiast, I have a strong distaste for JavaScript's lack of elegance. Fortunately, I have found a solution to adapt it to my liking. import { createApp } from 'vue' import App from './App.vue' var array_len_ ...

javascriptarraysvue.jsprototype

Navigate to the homepage section using a smooth jQuery animation

I am looking to implement a scrolling feature on the homepage section using jquery. The challenge is that I want the scrolling to work regardless of the page I am currently on. Here is the HTML code snippet: <ul> <li class="nav-item active"> ...

javascriptjqueryhtmlcss

Unable to close Bootstrap 5 modal

All of my modal forms are functioning properly, except for one that I migrated from Bootstrap 4 to Bootstrap 5. This particular modal refuses to close. Neither the Close button (the X at the top of the popup) nor the Cancel button will close the modal. I ...

javascripthtmltwitter-bootstrapbootstrap-modalbootstrap-5

If an iframe contains a div with a particular class inside, then execute the following code

I need to dynamically add a class to the parent element if a specific class is present in its child. The issue: the content is within an iFrame and I'm not very proficient with jQuery. It doesn't necessarily have to be jQuery, any alternative m ...

javascriptjqueryweb

Child component experiencing issues with Materialize Pagination and Sorting functionalities not functioning

New to materialize pagination and currently working on the hierarchy below: app modules > list > list.component app.component Implemented a sample code example in app.component which worked perfectly. However, encountered issues when trying to imp ...

angulartypescriptangular-material

Tips for retrieving the text value on keyboard enter press without triggering form submission

I am currently working on a feature where hitting the Enter key in a textbox should not automatically submit the form. The textbox is located within a form: @Html.TextBoxFor(model => model.ID, new { @class = "form-control input-sm", placehold ...

javascriptjqueryasp.net-mvcdom-events

I am attempting to display text in the input box on the console, but unfortunately, I am not seeing any changes in the console when typing

I have this code, but I am not getting any output when I run it: import { restaurantList } from "../config"; import { RestrauntCard } from "./Restraunt"; const Body = () => { const searchText = "KFC"; return ( <& ...

javascriptreactjs

Error: Failed to clone an object in Electron due to an unhandled promise

I'm in need of assistance with sending files from the main directory to the renderer. Before proceeding, I attempted to check if it was functioning correctly by using console.log(files). However, this resulted in an error message. Can someone please p ...

javascriptreactjselectron

Uploading an image using Vue.js

Currently, I am utilizing the ElementUi uploader and facing an issue where the file details are not being sent correctly to the back-end along with my form data: Screenshots When I select an image, here is the console log: https://i.sstatic.net/StfNl.pn ...

javascriptlaravelvue.jselement-ui

Incorporate an interface for handling potential null values using Typescript

Currently, I am utilizing Express, Typescript, and the MongoDB Node.js driver to develop my API. However, I am encountering an issue with the findOne method as it returns a promise that resolves with either an object containing the first document matching ...

node.jsmongodbtypescriptexpress

What could be causing the CSS to not display properly on specific routes?

I'm facing an issue where CSS seems to be working fine for certain routes with node.js & express, but not for others. It's puzzling because the HTML file links to the same CSS file in both cases. For instance, CSS works perfectly for the route " ...

javascripthtmlcssnode.jsexpress

Guide to removing a colon from my JSON.stringify output

I'm encountering an issue with a JSON.stringify function. It is adding a colon after the JSON object. axios.post('http://54.196.61.131/api/v0/user/250/product/add/scan', JSON.stringify({ name: currentProduct.product. ...

javascriptjsonreactjs

What is the correct way to add type annotations to an Axios request?

I have meticulously added type annotations to all endpoints in my API using the openapi-typescript package. Now, I am looking to apply these annotations to my Axios requests as well. Here is a snippet of code from a Vue.js project I have been developing: ...

typescriptvue.jsaxios

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

An obstacle prevents the code injection process in the Chrome extension when a button is pressed

My basic chrome extension is not functioning correctly. More specifically, I am encountering an issue where the alert box does not appear when I click on the button in the popup. Here are the contents of my manifest.json file: {"manifest_version": 2, "n ...

javascripthtmlgoogle-chrome-extension

Activate the counter as soon as the error message appears

To effectively track the number of errors generated upon form submission, I require a counter mechanism. The errors are identified by the CSS class .validmissing. For instance, if a user encounters 5 errors upon submitting the form, the counter should be ...

javascriptjquery

Discover the method to retrieve the chosen value from a list of radio buttons using AngularJS

After making an AJAX request and receiving JSON data, I have created a list of radio buttons with values from the response. Although I have successfully bound the values to the list, I am facing difficulty in retrieving the selected value. Below is a snipp ...

javascriptangularjs

Textfield removal from the input range is requested

I recently encountered an issue with my input range HTML code. Here is the initial code snippet: <input class="sliderNoTextbox" id="ti_monatlich" type="range" name="ti_monatlich" data-theme="d"> After some adjustments based on this helpful answer, ...

javascriptandroidjqueryhtmljquery-mobile

Tips on emulating typing actions in an input field during a Jest test

I am working on a component that displays type-ahead suggestions as the user types in a text field. The suggestions are fetched from a server based on the input provided by the user. I want to test this functionality by simulating a scenario where the us ...

javascriptreactjsjestjs