Velocity.js

Velocity.js
Login

Velocity.js

Accelerated JavaScript animation.

http://velocityjs.org/

NOTE: This project may be outdated. Last commit in 2019.

Download

There are several versions floating around for different CodePens.

Version 1:

    Velocity(document.getElementsByTagName("div"), { width: 75 }, 1500, { height: 0 }, 1250);

Version 2:

    element.velocity("style", "propertyName"[, value])

Version 1.5

    wget https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
    wget https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js
    wget https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/velocity.ui.min.js

Version 2

    wget https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js
    wget https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.min.js

Version 'new' (0.0.12) of jquery.velocity

    wget https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/jquery.velocity.min.new.js

Version 1 documentation

http://velocityjs.org/

Version 2 documentation/wiki

https://github.com/julianshapiro/velocity/wiki

Article: Animate SVG with velocityjs

https://davidwalsh.name/svg-animation

Fossil users and CSP (Content Security Policy) - please read this!

This web page is served by Fossil, which has a quite strict default CSP, which makes JavaScript demos running through Fossil do no work by default.
The configuration is easy through the Web UI, in Admin -> Settings.

The CSP shown by default in the Fossil Web UI is an empty string, but defaults to the following string (hardcoded in the Fossil source code):

csp-default.png

To make Javascript work without a Nonce when served from Fossil, change the CSP to this:

csp-custom.png

If the Web UI changes were done in a local checkout, don't forget to apply the same settings to the server repository:

    fossil config push all

Links:

Demos

Velocity.js: The Official Collection

https://codepen.io/collection/tIjGb

Local demos

demo01-chaining
demo02-easing01
demo03-loop
demo04-opacity
demo05-easing02
demo06-concurrent
demo07-chaining2
demo08-color
demo09-properties-map
demo10-codepen01
demo11-3d
demo12-svg-rect