Questions tagged [velocity.js]

Velocity is a open source library created to increase the performance of JavaScript animation

velocity.js
Filter by
Sorted by
Tagged with
0 votes
0 answers
57 views

Velocity.js versus CSS transition transform fps performance

I have always been under the impression that CSS transform has the best animation performance over any other options hands down. After all, the animations are handled by the GPU in a separate thread. ...
cytek04's user avatar
  • 516
1 vote
0 answers
288 views

Is Velocity.js abandoned/unmaintained?

Preface I've found anime.js, which not only has far better documentation than Velocity.js, but also has sequencing out of the box, and just works. I am moving to that library, but I'll keep this up in ...
FEERspreads's user avatar
0 votes
1 answer
73 views

How to skip duplicate values in the apache velocity js

I want to skip the duplicate values so using below code but it seems not working. #set($uniqueEntities=[]) #foreach($e in $entities) #if($foreach.index <=12) #if($uniqueEntities != ($e.offerId))...
Ambika Tewari's user avatar
1 vote
0 answers
213 views

How to use jQuery together with Velocityjs in a Vite(Typescript) project

in my Vite project I want to use jQuery combined with Velocityjs, but i'm not sure how to import everything so the common syntax $("body").velocity({ opacity: 0.5 }); works. at the moment I ...
Wolkemann's user avatar
0 votes
1 answer
267 views

How to set animation progress with anime.js/velocity.js/etc.?

I have animation like this (anime.js example): anime({ targets: '.selector', opacity: 0.5, translateX: 200, duration: 1, }); Then i need to set progress of this animation depending on page ...
Cheg's user avatar
  • 101
0 votes
1 answer
229 views

Having Trouble Setting Up Velocity Js

I'm trying to use Velocity Js for the first time and I'm having trouble getting it to work. Below is a nav menu that I'm trying to create. Everything in the code works fine except for the Velocity Js ...
nholder88's user avatar
0 votes
1 answer
241 views

Could not find declaration file for module 'velocity-animate'

I am trying to use the velocity-animate Module in my Vue Project. When i hover over the import statement in the module I get the following warning: Could not find a declaration file for module '...
Justin S.'s user avatar
0 votes
1 answer
167 views

Get the id value from Velocity animate when the link is clicked

Vue.component('accordion', { template: '#accordion', props: ['items'], methods: { openItem: function(item){ item.isopen = ! item.isopen }, setClass: function(item){ ...
Steve's user avatar
  • 3,725
1 vote
1 answer
501 views

Velocity-animate for large staggered lists in Vue

I have a large list that I'm introducing velocity-animate into. At the moment, my test list has 59 individual items that a user can filter by search query (potentially could grow to hundreds of items)....
J. Jackson's user avatar
  • 3,586
0 votes
0 answers
349 views

How to animate translateX with velocity.js without affecting translateY?

When I try to animate translateX directly, it shows the wrong Y position and no animation. But it works fine I use $.css('transfom', 'translate(x,y)') inside begin and complete options. Why doesn't ...
user avatar
0 votes
1 answer
487 views

Velocity is not defined: VUEJS

I am trying to use Velocity.js with my Vuejs but it gives me the error Velocity not defined: This is my Vuejs Code: <div class="anim_container"> <transition @before-enter="beforeEnter" @...
زوہیب خان's user avatar
0 votes
1 answer
373 views

Using velocity.js in angular component

I am trying to create an angular component that implements this codepen script. I created the component using ng g component <my-comp-name> so I have the 3 HTML, CSS and ts files in my ...
J Agustin Barrachina's user avatar
1 vote
0 answers
510 views

How to make animated div width change with Vue/Velocity?

The title of this question may be oversimplifying what I am trying to accomplish, or perhaps I am not looking at this from a good angle. I have a side navigation that I want users to be able to ...
develpr's user avatar
  • 1,336
0 votes
3 answers
1k views

Cannot read property 'Velocity' of undefined

I've a a problem, on wordpress, on use Velocity js. Inside function.php i've enqueued the velocity.min.js and velocity.ui.min.js, like this wp_enqueue_script('velociti-min-js', STYLESHEET_URI . '/...
Brisk's user avatar
  • 97
0 votes
1 answer
97 views

Animations performance in internet explorer 7

I am maintaining a legacy code at work that runs on internet explorer 7, and I have performance issues on the old hardware. Css animation being not supported in IE7, I've tried jquery animate but the ...
mar1's user avatar
  • 213
0 votes
1 answer
69 views

SVG transform property

I am having some issues with transforming an SVG. What I am trying to do is have a rotated rectangle scale and move at the same time. So far I have not found a way to do this.. Situation is as ...
Niels Vanwingh's user avatar
0 votes
1 answer
194 views

Can velocity.js implement CSS3 transition?

Have to run code in IE9 and have problems with CSS3 transition. Turned eyes to velocity js for this matter. Have no clue to transform to velocity code. Also I tried jquery css didn't work in IE9: $...
Johnpark's user avatar
0 votes
1 answer
514 views

Velocity "fadeIn" Issue with Version 2.0.0+ (including 2.0.5)

I am a new programmer of JS. I'm trying to learn some HTML animations on JS and I found an amazing package called "VelocityJS". But when I use the $ele.velocity("fadeIn") My chrome keeps throwing an ...
施云瀚's user avatar
0 votes
2 answers
341 views

Using scaleX and translationX at the same time (VelocityJS)

I have a bar that is filled from a certain percentage to another percentage (0% - 50%). I want to smoothly animate this towards a new range (25% - 55%). This means both the width and the location of ...
ApplePearPerson's user avatar
1 vote
2 answers
100 views

What does position-bottom mean in devtools?

I'm experimenting with some transforms and animations using Velocity.js. One of the animations scales an element that's been absolutely positioned, but for some reason, I can't get the element to ...
NicholasJohn16's user avatar
0 votes
1 answer
2k views

How can I use Velocity.js to smooth scroll to an element?

I have a button (in my case an anchor tag styled as a button) that I am using jQuery to listen for a click event. When I click the button, how can I smooth-scroll to the target? Here is what I have ...
Damon's user avatar
  • 4,336
2 votes
2 answers
93 views

jQuery weird interaction between .hide() and .show()

I have two elements in my website in the same container. One is visible (display: block), and one is hidden (display: none). On an event, I want the visible element to hide, and the hidden element to ...
Jeff Bezelona's user avatar
0 votes
3 answers
2k views

Automatic scrolling in child element with max-height

I'm trying to create a console/terminal like element for my website. Basically, I want users to type in commands and give output. When the output is generated, it might be a couple of lines of info. ...
krankit's user avatar
  • 62
1 vote
0 answers
134 views

how integrate a scroll-down effect with velocity.js in a react application without jquery?

I'm trying to create a scroll-down effect in a single-react-app. I'm using velocity.js, but I don't know how could I integrate this library in my component without jquery. Does someone have an idea to ...
pilar torres's user avatar
1 vote
1 answer
3k views

How to integrate a Vue project with Velocity.js , any examples?

Currently I am trying to integrate Projects from CodePen that use Velocity.js and I am unable to integrate them in my project. In the main.js file I import velocity from 'velocity-animate' Any ...
user10410056's user avatar
0 votes
1 answer
300 views

Animation performance issue velocity.js

I'm trying to animate spans and the animation seems to be working but it is a bit laggy and not smooth. https://codepen.io/pokepim/pen/JBRoay I think it is because im using left/right to animate $("....
Alex T's user avatar
  • 3,558
1 vote
1 answer
2k views

Velocity js for scale 1

I literally just started learning jquery and velocity at the same time for animation purposes. I was reading the velocity.js docs and trying to manipulate the "scale" of my box and ran into some ...
Jp Arcilla's user avatar
1 vote
1 answer
69 views

Slidein element is visible before the animation

I'm trying to recreate the animations when loading from this website: https://uchuhimo.me I think they are using velocity.js to do the animations. I tried to recreate some of this and kind of ...
Alex T's user avatar
  • 3,558
0 votes
1 answer
55 views

VelocityJS stepped easing doesn't seem to work anymore?

According to VelocityJS's documentation, el.velocity({ width: 500 }, [ 3 ]); should animate the width property of el from it's native value to 500px over three distinct frames. However, it appears to ...
dougoftheabaci's user avatar
0 votes
1 answer
67 views

VelocityJS 2.0.5 - SkewX

Just playing around with VelocityJS 2.0.5 $l1.velocity({ translateX: ['-50%', -lineWidth], translateY: [0, 0], width: lineWidth }, 300, 'easeInOutCubic'); $l1.velocity({...
ElmosGotAGun's user avatar
0 votes
0 answers
125 views

velocity js hamburger menu function

Im trying to write a function where I click a hamburger menu, and it opens, then clicked again it closes. I've tried many examples, but it always returns an error of "Cannot read property 'pattern' of ...
user1218670's user avatar
5 votes
1 answer
2k views

Cannot read property 'pattern' error after velocity.js latest update (2.0.3)

My code worked until yesterday: <script src="//cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script> $('[id^=home-layer-]').velocity({ transform: 'scale(2)' }, { ...
Pepe's user avatar
  • 51
0 votes
1 answer
64 views

Issue with Section Transitions using Velocity.js and JQuery ~ Glitching Animation

Aloha! I'm having a performance issue with a page running velocity.js transitions. JSFiddle - Click anywhere on the container to change screens. All is running perfectly smoothly advancing to a ...
Brendan's user avatar
  • 133
1 vote
2 answers
109 views

How to use CanJS with VelocityJS?

I'm using CanJS (with StealJS) to build a quizz app, and I have quizz-question component that is rendered for each question! I wonder how to make a transition with velocityjs each time quizz-question ...
Cherif BOUCHELAGHEM's user avatar
0 votes
1 answer
692 views

import velocity.ui always returns 'Velocity must be loaded first. Aborting.'

I'm trying to include the Velocity UI pack using the following: import Velocity from 'velocity-animate'; import 'velocity-animate/velocity.ui.js'; and it always returns the message "Velocity must be ...
Bruno Amaral's user avatar
1 vote
1 answer
204 views

Velocity.js script not working in Safari Browser

I have used Velocity.js for my website , here is a sample link . Its not working on Safari browser on Desktop. What could be the reason.
Mohit Bhatia's user avatar
1 vote
1 answer
464 views

How to include VelocityJS using webpack

I'm new to using webpack and been going back and forth trying to solve this. The project's webpack.config is this: const webpack = require('webpack'); const path = require('path'); const config = { ...
Bruno Amaral's user avatar
0 votes
0 answers
28 views

Looping non-jQuery animation works fine until loops back to starting point

Trying to loop through a set of sliding frames for a header features thing. The "slide" divs... <div class = "homeSlideHolder"> <div class = "slide" id = "hs1" style="left: 0px;"> ...
OoDeLally's user avatar
0 votes
2 answers
867 views

simple rotateZ not working in Velocity js

I want to rotate an element by velocity js but rotateZ not work but some animations like width, height, opacity and so on work correctly. This is my simple code: <style> #test{ ...
Behnam Azimi's user avatar
  • 2,358
1 vote
0 answers
536 views

Page Scroll Effects - VelocityJS - (Page Anchors with Data-hijacking enabled)

I'm stuck with my page scroll effects. This is what I've got so far - https://codepen.io/DCRSLG/pen/jzYJeY $(document).ready(function($) { //variables var hijacking = $('body').data('hijacking'), ...
DCR97's user avatar
  • 27
0 votes
1 answer
1k views

Translate not working in Velocity.js

I'm having some trouble animating an element using Velocity.js. My current code does not work (it's meant to translate the element 100 pixels to the right)... $("#example").velocity({ translateX: "...
Zak's user avatar
  • 1,940
0 votes
1 answer
53 views

Why are elements animated by VelocityJS only changing opacity?

I was setting up a basic demo of VelocityJS and I noticed that only the opacity of the elements were changing, despite copying the samples from the VelocityJS documentation. I was debugging it and ...
Tim's user avatar
  • 461
0 votes
1 answer
1k views

Change position and scale on click with Velocity JS

I want to make a function which to scale and change the position of a button. When you click, I want it to transition to absolute center of the page and scale. Can't make it work, rookie here! Thanks! ...
M Mocanu's user avatar
0 votes
1 answer
631 views

translate3d makes element jump

I use transform's translate3d to center the popup div in a container. //CSS element { display: none; opacity: 0; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } //...
forethought's user avatar
  • 3,073
0 votes
2 answers
220 views

velocityjs animation get messed up when animation running browser tab becomes inactive

I have animation running continuously on setInterval. Animation with two items in sequences are working fine but when adding third item to sequence, the animation gets messedup when users open new tab ...
forethought's user avatar
  • 3,073
1 vote
1 answer
662 views

Webpack - 'velocity is not defined'

I'm using webpack along with gulp and this is my webpack config: webpack.config.js const path = require('path'); var HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); module.exports =...
Filip Petrovic's user avatar
5 votes
3 answers
5k views

How to animate translate properties with Velocity.js?

I have a simple block that is suppose to move left 200px with translateX. It will move left with position left. I can't seem to move the block with translateX or translateY. CSS values for Transform ...
Brad Vanderbush's user avatar
2 votes
1 answer
874 views

Velocity.js: Uncaught (in promise) Error: Velocity: First argument (scroll) was not a

This is an example from http://velocityjs.org/#scroll Excuse me but I'm a noob of Velocity.js, jQuery and StackOverflow XD. I have the following error: Uncaught (in promise) Error: Velocity: First ...
filb's user avatar
  • 99
4 votes
2 answers
2k views

Velocity Scroll Issue with Version 2.0.1

An update to the newest version of Velocity (2.0.1) causes an issue related to scroll. Specifically, the following error message is thrown: Error: Velocity: First argument (scroll) was not a ...
bryman79's user avatar
  • 383
0 votes
1 answer
614 views

Velocity.js version 2.0 not animating

Using Velocity version 2.0, the element is being removed from the DOM after about 1500ms, but there is no animation. It just pops in and out of view. var jQueryObject = document.jQuery(element); ...
Glen Pierce's user avatar
  • 4,621

1
2 3 4 5
7