Questions tagged [velocity.js]
Velocity is a open source library created to increase the performance of JavaScript animation
velocity.js
318
questions
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. ...
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 ...
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))...
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 ...
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 ...
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 ...
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 '...
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){
...
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)....
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 ...
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" @...
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 ...
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 ...
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 . '/...
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 ...
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 ...
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:
$...
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 ...
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 ...
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 ...
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 ...
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 ...
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.
...
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 ...
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 ...
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
$("....
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 ...
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 ...
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 ...
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({...
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 ...
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)'
}, {
...
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 ...
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 ...
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 ...
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.
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 = {
...
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;">
...
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{
...
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'),
...
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: "...
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 ...
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!
...
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);
}
//...
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 ...
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 =...
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 ...
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 ...
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 ...
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);
...