Velocity.js causing a slowdown in animated performance

Currently, I am attempting to animate spans, and while the animation is functional, it appears to be somewhat choppy and lacks smoothness.

https://codepen.io/pokepim/pen/JBRoay My assumption is that this is due to my use of left/right for animation purposes.

$(".bf").velocity({left: "100%" })
$(".af").velocity({right: "100%" })

I am now experimenting with reconstructing this effect using translateX, but unfortunately, it doesn't seem to work as expected (in fact, there is no visible animation at all).

$(".bf").velocity({ translateX: "-100%" })
$(".af").velocity({ translateX: "100%" })

Here is the codepen showcasing this particular example:

https://codepen.io/pokepim/pen/ejzZvy

javascriptcssvelocity.js

Answer №1

If you're working with Velocity V2, you'll find that it doesn't include the problematic fake transformX style shortcuts found in previous versions. The documentation on the website specifically points out that it pertains to V1 only, and directs users to consult the Github wiki for V2 documentation.

The recommended approach is to utilize real CSS for animations, which means utilizing the actual transform property. To ensure smooth animation, it's advised to forcefeed the initial value when animating as V2 does not automatically read the browser's value (details can be found in the wiki):


$(".bf").velocity({ transform: ["translateX(-100%)", "translateX(0%)"] });
$(".af").velocity({ transform: ["translateX(100%)", "translateX(0%)"] });

Additionally, it's important to note that Velocity is now completely independent from jQuery. If your main purpose is element selection, consider dropping jQuery in favor of using native methods:


document.querySelectorAll(".bf").velocity({ transform: ["translateX(-100%)", "translateX(0%)"] });
document.querySelectorAll(".af").velocity({ transform: ["translateX(100%)", "translateX(0%)"] });

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

Problems with Bootstrap affix scrolling in Internet Explorer and Firefox

I'm encountering an issue with the sidebar on my website. I've implemented Bootstrap affix to keep it fixed until the end of the page, where it should move up along with the rest of the content at a specific point... Everything seems to be worki ...

javascriptjquerycsstwitter-bootstrapaffix

What are the typical situations in which Node.js is commonly used?

Do you believe that a majority of node.js users primarily utilize npm? What do you think are the most prevalent use cases for node.js apart from npm? ...

javascriptnode.js

Is there a way for me to retrieve props that have been passed through the Vue router within a Vue component?

I have configured a route as shown below: { path: 'fit-details', name: 'fit-details', component: Fitment, props: true }, I am passing props via the route using data from the state: this.$router.push({ path: 'fit-details&a ...

javascriptvue.jsvue-router

Developing an intricate nesting structure for an object

this is my code snippet: "book" => {b:{o:{o:k:{'end':true} could someone please provide an explanation or a helpful link for this? const ENDS_HERE = '__ENDS_HERE' class Trie { constructor() { this.node = {}; } insert(w ...

javascriptpythonobjecthashtable

Is it possible to utilize the lighten css property within ngStyle in Angular?

Having some trouble with the lighten property in ngStyle and it's not working as expected. I have a color variable within my component that I want to utilize like so: <div [ngStyle]="{color: schedule.group.color, background: 'lighten(' ...

htmlcssangular

The mat-datepicker appears in a unique location each time it is opened

I am facing an issue with my mat-datepicker appearing in the opposite place when clicked on one component. How can I resolve this? I have two different components with mat-datepicker, but they behave differently. I suspect that imitating a click in one com ...

javascriptangularangular-materialmat-datepicker

What are the steps to achieve such a design?

Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...

htmlcsslayout

Is it possible to generate an interactive HTML form using JSON information?

When the user clicks the "get Form" button, a request is sent to the form API to retrieve information for rendering the form. Once the form is rendered, the user can then submit the form. This process can be repeated as needed. HTML: <body ng-app="Json ...

javascriptjqueryjsonangularjs-scope

What could be causing the invalid hooks error to appear in the console?

I'm completely stumped as to why this error is popping up when I try to use mutations with React Query. Any insights or advice would be greatly appreciated. Note: I'm implementing this within a function component in React, so it's puzzling ...

javascriptreactjsreact-hooksreact-query

Designing motion graphics for a browser game

As I delve into learning about Node.js, Angular.js, Socket.io, and Express.js, my current project involves creating a multiplayer poker game like Texas Hold 'Em. However, despite spending a considerable amount of time browsing the internet, I have bee ...

javascriptphpangularjs

Setting the x-api-key header with HttpInterceptor in Angular 4: A guide

I am attempting to use HttpInterceptor to set the header key and value, but I am encountering the following error: Failed to load https://example.com/api/agency: Response to preflight request doesn't pass access control check: No 'Access ...

javascriptangular

Collaborating on validating inputs and modules for both backend and frontend

Sharing input validation is crucial for various reasons: Immediate feedback to users on the frontend regarding the validity of their input Enhanced security measures in the backend, preventing manipulation of data through the API Dependency on frontend J ...

javascriptnode.jsreactjsvalidation

Which is better: Utilizing Ajax page echo or background Ajax/direct HTML manipulation?

I am facing a dilemma and I could really use some guidance. Currently, I am in the process of developing an ordering system using PHP/Smarty/HTML/jQuery. The main functionality revolves around allowing sellers to confirm orders on the site. My goal is to ...

javascripthtmlajaxmaster-detailhtml-manipulation

The issue arises when Node.js fails to identify the input fields that were dynamically inserted into the form

I came across a question similar to mine, but I found it challenging to apply the solution to node js. In my project, users can add items to a cart by clicking on them, which are then dynamically added to a form using jquery. However, upon submission, only ...

javascriptnode.jspug

What is the most efficient way to retrieve the operating system's name and version using JavaScript?

I'm in the process of developing an object that will simplify accessing browser and system information by implementing a function. One particular function within this object is responsible for retrieving the operating system name and version, returnin ...

javascripthtmloperating-systemuser-agentnavigator

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

Preventing checkbox selection with CSS

Can CSS be used to deactivate clicks on checkboxes while still maintaining their functionality for dynamically setting values using Javascript? I have not been able to find a suitable solution. pointer-events:none Unfortunately, this did not work as expe ...

htmlcsscheckbox

A method for utilizing history.goBack in linked tabs while preventing the user from reverting to the previously selected tab

In my application, I have a settings modal that contains tabs which act as links to different paths. When the user clicks on the background outside of the modal, it triggers the history.goBack function. However, I noticed that if the user has already click ...

javascriptreactjsreact-router

Supply context to node package

I've encountered an issue with the code below, where sometimes the content is not passed correctly: var app = require('buildersApps'); app.addContent({ folderPath: __dirname + '/content/' }); app.start(); To address thi ...

javascriptnode.jsmoduleecmascript-6bind

Using jQuery to swap out sections of a HTML tag

Similar Question: Use of jQuery for Modifying an HTML Tag? After extensive research, I have not come across a solution that fits my specific requirements. My objective is to replace a part of an HTML tag without completely replacing the entire tag. To ...

javascriptjquery