Stack Overflow
Stack Overflow

Questions tagged [velocity.js]

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

Velocity is a standalone library that re-implements jQuery's $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow.

Velocity V2 also makes it simple to create far more complicated animations than most other animation libraries by including a syntax that allows for animations that look very similar to CSS animations, but with separate easings on every property at every change in value (Sequences).

For more information check out the GitHub page and the wiki.

323 questions
13
votes
1 answer

Velocity.js Rotation Around Center Axis

I'm trying to make a gear rotate around its z axis. It works as expected, but then reverses after the 5000 duration. How do I stop it from reversing and only make it go forward? Thanks var gear_width = $('.gear').width(); var gear_height =…
Camrin Parnell
  • 423
  • 2
  • 8
  • 21
9
votes
1 answer

velocity-react - animating scrollTop after component update

I'm writing a simple "console" that shows messages in a chat-like manner. With messages appearing from the bottom, and moving up. I have the working code, but I'd like to animate the appearing messages by scrolling the container to the bottom each…
Piotr Ma'niak
  • 230
  • 3
  • 13
6
votes
1 answer

Velocity.js and calc() CSS function

I'm trying to animate an element's width using velocity and the calc() function. $("#menuContainer").velocity({width: "calc(100% + -260px)"}, 500); this animates the element's width to 0. Does .velocity not support the css function calc()? or am do…
esd
  • 105
  • 9
6
votes
0 answers

Velocity.js ES6 Import (with Webpack)

I'm getting this error ERROR in ./bower_components/velocity/velocity.js Module build failed: TypeError: /Users/dave/project/bower_components/velocity/velocity.js: Cannot read property 'length' of undefined (note: the error is much longer with all…
dave
  • 2,162
  • 4
  • 22
  • 20
5
votes
1 answer

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

My code worked until yesterday: $('[id^=home-layer-]').velocity({ transform: 'scale(2)' }, { duration: duration, easing: "ease-out", loop:…
Pepe
  • 51
  • 4
5
votes
3 answers

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 translate will work. Reason to use translate is…
Brad Vanderbush
  • 161
  • 1
  • 10
5
votes
2 answers

VelocityJS(velocity-animate) + WebPack - How can I use it?

I have started using Webpack and I have installed VelocityJS(velocity-animate) from NPM. I am importing it like this import Velocity from 'velocity-animate'; but I don't really know how to use it. For example ... How would I write…
QoP
  • 21,478
  • 16
  • 61
  • 69
5
votes
4 answers

Velocity is not defined

I give up. How do I get Velocity defined. None of the examples show this, and correctly; it should be easy. I am attempting to use velocity version 1.2.3 without JQuery, (released nine days ago according to GitHub). I obtained the first version (an…
Daniel B. Davis
  • 91
  • 2
  • 9
5
votes
1 answer

Loop/Restart Animation with Velocity without Playing in Reverse

I am using Velocity to translate an element across the screen. Upon completing, I would like the element to return to its origin point and loop the animation, bypassing the default reverse effect that occurs while looping. I have my standard…
Yuschick
  • 2,187
  • 1
  • 21
  • 38
5
votes
1 answer

Recreate bounce easing with spring easing

Looking through velocity.js changelog I read: ... 2) The back, bounce, and elastic easings have been removed. Use spring physics instead. ... I was wondering if there is any simple way to recreate the easeOutBounce effect that is available with…
easwee
  • 14,813
  • 24
  • 53
  • 80
5
votes
3 answers

Animate height to auto - storing height - slideUp with velocity.js

I'm trying to make a slide-toggle-fade animation like the slideToggle() method but with velocity.js - in the hopes that it will be much smoother. Because I can't scroll to auto - I am putting the height in variable and using that to animate height.…
sheriffderek
  • 8,217
  • 6
  • 38
  • 64
4
votes
2 answers

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 property map, a known action, or a registered redirect.…
bryman79
  • 373
  • 1
  • 11
4
votes
1 answer

Angular: How can I use Velocity.js within my Angular application?

I have used velocity.js in my own personal web sites but never within an angular application. I'm not an angular developer (yet) so please bear with me. I am following the README file on the angular-velocity github page. But when I run my…
Damon
  • 3,202
  • 4
  • 30
  • 64
4
votes
2 answers

How to animate a single SVG Polygon Point?

How do i animate (move) a single polygon point within a SVG? If possible, using velocity.js. Thanks for your help!

From...

Elvis
  • 289
  • 4
  • 14
4
votes
1 answer

Replace jquery's $.animate with $.velocity doesn't work

I have this animation that work just fine in jquery, except it's pretty lagy. onclick, it scroll down smoothly to the wanted element. $('#aboutMenu').click(function(){ $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top…
Oli
  • 53
  • 5
1
2 3
…
21 22