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

Guide on categorizing MUI icon types

My current code snippet is as follows: type MenuItem = { key: string; order: number; text: string; icon: typeof SvgIcon; }; However, when I attempt to use it in my JSX like this: <List> {MENU.map((menuItem: MenuItem) => ( ...

reactjstypescriptmaterial-ui

Switching between various components based on conditions within the same route in Angular

My goal is to have 2 separate views, one for the homepage and another for authentication. I want to display the LoginComponent on the route '/' and the SignupComponent on the route '/signup' if the user is not logged in, otherwise rende ...

angulartypescriptangular-ui-routerrouterangular-router

When you click the "Select All" button in a JavaScript dialogue box, all of the checkboxes on the main page will automatically be selected

After clicking a button on the main page to add a SKU, a new window opens with a search field, as shown in the image below. In this pop-up window, there is a "Check All" button that, when clicked, selects all checkboxes on both the pop-up window and the ma ...

javascriptjqueryuser-interfaceeventsfrontend

Differentiating between mouseenter and tap events: What's the key?

When a mouseenter event is present, touch-enabled devices will activate this event when the user taps on the element. Is there a way to differentiate between an actual physical mouse entering and a simulated tap (which resembles a mouse enter)? ...

javascriptdom-events

PHP failing to retrieve information

Having trouble with this specific file as it seems to be missing data in the address fields. Additionally, whenever "notes" are inputted, the Address data disappears. Any thoughts on how to resolve this issue? <tbody> ' ; $message .=&a ...

javascriptphpjquery

Using the Ajax method from a separate class in TypeScript: A step-by-step guide

Recently, I started learning about typescript and ajax. One of the challenges I encountered was while creating a method in typescript for making ajax calls that can be used across classes: myFunc(value: string): JQueryPromise<any> { var dfd = $. ...

javascriptjqueryajaxtypescript

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable? #myDiv{ width: 80% } #myP{ c ...

javascriptjquerycss

Ways to eliminate excess space in a string using Robot Framework

My Variable : 54, 22 What I desire : 54,22 I attempted the following methods: Executing Javascript code var a = 54, 22;var x = a.split(' ').join('');return x and Executing Javascript code var a = 54, 22;var x = a.replace(/&bso ...

javascriptjqueryseleniumrobotframework

Refreshing and enhancing Android contacts through the Expo project

For my current project, I am utilizing the Expo Contact module to automatically update contact information. Here is a part of my script that focuses on updating a selected phone number: const updateContact = async (callId, newCall) => { getSingleConta ...

javascriptnode.jsreact-nativeexpo

Unable to activate parameter function until receiving "yes" confirmation from a confirmation service utilizing a Subject observable

Currently, I am working on unit tests for an Angular application using Jasmine and Karma. One of the unit tests involves opening a modal and removing an item from a tree node. Everything goes smoothly until the removeItem() function is called. This functi ...

angulartypescriptunit-testingjasminekarma-jasmine

Notifications will be displayed with Alertifyjs to the individual who activated them

Just diving into the world of nodejs and express framework, so I appreciate your patience as I navigate through this learning process. I've implemented the alertifyjs library to display notifications for different alerts on my site. However, I&apos ...

javascriptnode.jscookiesexpressalertifyjs

Submitting information to a server

I have a simple Angular 6 app with follow and unfollow buttons. When you click follow, the number increases. I want to save these follower numbers to a JSON server. Here is the link to the JSON server documentation: JSON Server Documentation To see a dem ...

javascriptangulartypescriptangular6json-server

AngularJS - Determine the correct condition or make a choice from the available options

I'm having trouble figuring out how to save the option I select to a viewmodel. The ng-model should save whatever option I choose, and if nothing is selected, the value should default to "Select One." The available options are YES (true) / NO (false). ...

javascriptangularjs

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Looking to transform a div with the transform: scale(-1,1) property while using background-clip: text on the text within it. However, this causes the text to disappear. Here's what I've attempted: .reverse { transform: scale(-1, 1); } .gr ...

javascripthtmlcss

I haven't encountered any type warnings in the places where I anticipated them

When I define an object like this: const x: { str: string, num: number } = { str: str, num: not_a_num }; I am surprised to find that even though 'not_a_num' is a string and not a number, the compiler does not throw an error. Instead, ...

typescript

I am currently in the process of verifying email addresses

I attempted to validate multiple email addresses from a txt file and then save the valid emails to another txt file using nodejs. Unfortunately, it did not work as expected. Despite successfully reading the file, all emails were deemed invalid, even though ...

javascriptnode.jsexpressemailemail-verification

Looking to display an alert message upon scrolling down a specific division element in HTML

In the midst of the body tag, I have a div element. <div id="place"> </div> I'm trying to achieve a scenario where upon scrolling down and encountering the div with the ID "place", an alert is displayed. My current approach involves che ...

javascriptjquery

Combining the functionality of a click event

Is it possible to combine these two functions in a way that ensures when '#css-menu' is shown, '.menu' becomes active, and vice versa? $('.menu').click(function() { $('#css-menu').toggleClass('shown hidden& ...

javascriptjquery

Learn the steps to upload multiple images to Firebase realtime database with the help of Vuejs

I am currently facing an issue with uploading multiple images to a real-time Firebase database. I have successfully managed to upload one image, but I am unsure how to handle multiple images at once. This is the code snippet for uploading a single image: ...

javascriptfirebasevue.jsfirebase-realtime-database

Can you tell me how to display the currently utilized Node.js version and path within npm?

I’m encountering a similar issue to the one discussed in this Stackoverflow thread: SyntaxError: Use of const in strict mode?. However, my problem arises when attempting to install Flux. I followed the steps outlined in the linked Stackoverflow question ...

javascriptnode.jsbashubuntu