velocityjs

What is velocityjs?

Velocity.js is a fast, feature-rich animation engine for JavaScript. It allows you to animate HTML elements with a variety of effects, providing a more performant alternative to jQuery's $.animate() method. Velocity.js is designed to work seamlessly with jQuery but can also be used as a standalone library.

What are velocityjs's main functionalities?

Basic Animations

This feature allows you to animate basic CSS properties like opacity and position. The code sample animates an element's opacity to 0.5 and moves it to 50% from the left over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ opacity: 0.5, left: '50%' }, { duration: 1000 });

Color Animations

Velocity.js supports color animations, allowing you to animate CSS color properties. The code sample changes the background color of an element to red over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ backgroundColor: '#ff0000' }, { duration: 1000 });

Scroll Animations

This feature allows you to animate scrolling to a specific element. The code sample scrolls the page to the element with an offset of -50 pixels over a duration of 1000 milliseconds.

document.getElementById('element').velocity('scroll', { duration: 1000, offset: -50 });

Easing

Velocity.js provides various easing functions to control the animation's acceleration and deceleration. The code sample animates an element's opacity to 1 using a 'spring' easing function over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ opacity: 1 }, { duration: 1000, easing: 'spring' });

Chaining Animations

You can chain multiple animations together in sequence. The code sample first animates an element's opacity to 0.5 and then moves it to 50% from the left, each over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ opacity: 0.5 }, { duration: 1000 }).velocity({ left: '50%' }, { duration: 1000 });

Other packages similar to velocityjs

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports a wide range of animations, including CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to Velocity.js, Anime.js offers more advanced animation capabilities and a more modern API.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript library for creating high-performance animations. It is widely used in the industry for its flexibility and power, supporting complex animations and timelines. GSAP is more feature-rich and versatile compared to Velocity.js, making it suitable for more complex animation needs.

popmotion

Popmotion is a functional, flexible JavaScript animation library. It provides a range of tools for creating animations and interactions, including physics-based animations. Popmotion is more modular and functional compared to Velocity.js, offering a different approach to building animations.

README

Velocity - Template Engine

Velocityjs is velocity template engine for javascript.

中文版文档

Features

• Supports both client and server side use.
• Separation of parsing and rendering templates.
• The basic syntax is fully supported all java version velocity.
• Vim Syntax for vim.

Install

via npm:

$ npm install velocityjs

Broswer

Compatible all modern broswer, You can try test case on your browser to test it.

For other lower version broswer, you need have those polyfill function.

1. Array.prototype map, forEach, some, filter, every, indexOf
2. Date.now
3. Object.keys

Examples

You can find a lot of examples from the tests directory. There is no different between the use of browser and NodeJs.

Public API

{
  // render method
  render(vm: string, context?: Object, macros?: Object): string;

  parse(vm: string, config?: Object, ignorespace?: boolean): Array<Ast>;

  Compile: {
    (asts: Array<Ast>, config?: Object): {
      render(context?: Object, macros?: Object);
    };
  };
}

render

params:

• vm {string} velocity string input
• context {object} render context, data or function for vm
• macros {object} such as #include('path/xxx') , you can define you inlcude macro function

var Velocity = require('velocityjs');

Velocity.render('string of velocity', context, macros);

context

context is an object or undefined, for vm $foo.bar, data look up path will be context.foo.bar. context can have method, and call it just on velocity string.

The method of context, will have eval method on this of inner method body. You can eval to rerender velocity string, such as test code $control.setTemplate.

Compile and parse

parse method can parse vm, and return ast tree of velocity.

Compile will render asts to result string.

var Compile = Velocity.Compile;

var asts = Velocity.parse('string of velocity');
(new Compile(asts)).render(context, macros);

Compile

params:

• asts {array} array of vm asts tree
• config {object} you can define some option for Compile

config

• escape {boolean} default true, default escape variable to html encode, you can set false to close it.
• unescape {object} define the object, which key do not need escape. For example, set unescape equal {control: true}, so $control.html will not escape.
• env {string} when env equal development will throw error when null values are used
• valueMapper {function} this config allow us to redefine the #set value, @see https://github.com/shepherdwind/velocity.js/pull/105

parse

params:

• vm {string} string to parse
• blocks {object} self define blocks, such as #cms(1) hello #end, you can set {cms: true}
• ignorespace {boolean} if set true, then ignore the newline trim.

Syntax

Syntax you can find from velocity user guide。

Directives

Directives supports have set, foreach, if|else|elseif, macro, break, stop.

Some othe directive evaluate, define, parse, do not supported default, but You can realize by context or macros, for example parse

Questions

You can find help from those ways:

1. New issue
2. Email to eward.song at gmail.com
3. 阿里内部员工，可以通过 hanwen.sah 搜到我的旺旺

Other

Recommend an other velocity.

License

(The MIT License)

Changelog

1.1.0 2018-06-12

• feat: Add support for .put, fix issue #103 by @lightsofapollo
• feat: add config.valueMapper support by @lightsofapollo #105