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

Showing information from the data text option

I'm having trouble displaying text below the cube. The code works fine in a standalone fiddle, but it doesn't work when I incorporate it into my project. Can someone help me figure out how to show the value of data-text="Cube1"? Code t ...

javascriptjquerycssjquery-uijquery-events

Restricting or postponing HTTP requests in an AngularJS service

I recently developed a service for my AngularJS app that retrieves data by making $http calls through various methods. However, I encountered an issue where these requests were being triggered every time an HTML element in the view (a product details div) ...

javascriptangularjs

The scroll function is failing to activate at the desired location

I've been trying to fine-tune a window scroll function I created. Initially, I attempted to use waypoints for this, but unfortunately, I couldn't get it to work as expected. The main issue I'm facing is that the function triggers too early ...

javascriptjqueryhtmlfunctionscroll

Learn the method for switching between exclusive visibility using Bootstrap class toggles

I've set up a jQuery function that toggles the visibility of different divs when clicking on folder icons: $(document).ready(function() { $("#techfolder").click(function(){ $("#txt").toggleClass("d-none"); }); $("#persfolder").click(functio ...

jquerycsstwitter-bootstrap

Is it advisable to hold off until the document.onload event occurs?

I'm working with a basic HTML file where I need to generate SVGs based on data retrieved through an AJAX call. Do I need to ensure the document is fully loaded by enclosing my code within a document.onload = function() { ... } block, or can I assume ...

javascripthtmlajaxsvgd3.js

css Issue with the "left" property

Is it possible to center the left side (left border) of a child div within its parent div? I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why? <div id="outher"> <div id="inner ...

htmlcsspositioning

Showing additional content in an alternative design

I'm currently facing an issue with the "load more" post button on my Wordpress site. I've designed a unique grid layout for the category page, with a load more button at the bottom. However, when I click the button to load more posts, they appear ...

javascriptphpajaxwordpresslayout

Emphasize SELENIDE rows

My goal is to achieve the following: @Test public void tableTest() { getDriver().get(BASE_URL + "tabulka.php"); List<WebElement> rows = getDriver().findElements(By.xpath("//table//tbody//tr")); for (We ...

javascriptjavaselenium-webdriverhighlightselenide

The issue of texpress-session failing to set a cookie in a React application arises when the app is deployed

I'm encountering an issue where I can't establish session cookies in the browser for my MERN stack application. Everything works fine when both the express server and the react front end are running locally, but the problem arises after deploying ...

javascriptnode.jsreactjsexpressheroku

What is the best way to center a div horizontally when the width is unknown?

Check out the full screen result here: http://jsfiddle.net/anik786/UYkSf/4/embedded/result/ Here's where you can find the HTML/CSS: http://jsfiddle.net/anik786/UYkSf/4/ This is the HTML code: <div class="gallery_container"> <div class="pic ...

csshtmlscreen-size

Displaying or concealing fields through Javascript depending on the category type of the results item

I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, ...

javascriptjqueryhtmlcss

Learn the best way to send query parameters through the Next.js navigation router and take advantage of

Currently, I am implementing import { useHistory } from 'react-router-dom' const history = useHistory() ... history.push('/foo?bar=10') However, only the 'foo' part is being pushed into the url. What is the correct way to pas ...

javascriptnext.js

AngularJS Skype URI Button Problem

Implementing a Skype button in my project using AngularJS has been challenging. Here is the code I am currently working with: HTML: <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script> <skype-ui ...

javascriptangularjsskypeskype-uri.js

How can I convert text containing in Node.js and insert actual new lines instead of the character?

I'm trying to transform a text response by removing special characters like \n and turning them into actual new lines. The initial response contains special characters -----BEGIN MESSAGE----- v1.60 hQEMAwPgeMJUXSL5Bps+U3lC8tnc D8s2Aeb7UtryIRAB ...

javascriptnode.jstext

How to use JQuery to automatically scroll to the bottom of a

I've encountered an issue with my chat conversation update function. It runs every 2 seconds, but whenever I scroll up to read older messages, the page automatically scrolls down again when it updates. This is preventing me from reading old messages p ...

javascriptjqueryajax

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

javascriptjqueryhtml

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

I'm facing a challenge trying to blend a few elements together: My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width. I want these columns to switch to one column when the viewport is sma ...

htmlcssresponsive-designmultiple-columnsviewport

The EXIF-JS data is becoming inaccessible beyond the method's scope

Currently, I am in the process of developing a web application using Angular 8. My main objective is to access the exif data of an input image outside the getData method by assigning the obtained data to a global variable. However, when attempting to acces ...

javascriptangulartypescriptexif-js

What steps should be taken to set up the datatable to sort records in descending order based on the creation date?

In my Rails application, I am utilizing the Datatable plugin to display data on the User index page. The first column in the index page is the created_at field, which displays dates like Mon, 17-Oct-16. I want to sort this column in descending order base ...

javascriptruby-on-railssortingdatedatatable

The navigation bar is obscuring the header on my website

I am facing an issue with creating a navigation bar that covers up the header text. I tried adjusting the margins to fix this problem but ended up moving the header along with the navigation bar. How can I ensure that the navigation bar remains fixed witho ...

htmlcss