Jquery Velocity(0.0.21) Promise+UI pack
by HYEONGJINKIM
HTML
<div></div>
CSS
div {
width: 40px;
height: 40px;
background-color: #f00;
position: absolute;
left: 100px;
top: 100px;
}
JavaScript
/***************
Details
***************/
/*!
* Velocity.js: Accelerated JavaScript animation.
* @version 0.0.21
* @docs http://velocityjs.org
* @license Copyright 2014 Julian Shapiro. MIT License: http://en.wikipedia.org/wiki/MIT_License
*/
/****************
Summary
****************/
/*
Velocity is a concise CSS manipulation library with a performant animation stack built on top of it. To minimize DOM interaction, Velocity reuses previous animation values and batches DOM queries wherever possible.
Whenever Velocity triggers a DOM query (a GET) or a DOM update (a SET), a comment indicating such is placed next to the offending line of code.
To learn more about the nuances of DOM performance, check out these talks: https://www.youtube.com/watch?v=cmZqLzPy0XE and https://www.youtube.com/watch?v=n8ep4leoN9A.
Velocity is structured into four sections:
- CSS Stack: Works independently from the rest of Velocity.
- Velocity.animate() is the core animation method that iterates over the targeted element set and queues the incoming Velocity animation onto each element individually. This process consists of:
- Pre-Queueing: Prepare the element for animation by instantiating its data cache and processing the call's options argument.
- Queueing: The logic that runs once the call has reached its point of execution in the element's $.queue() stack. Most logic is placed here to avoid risking it becoming stale.
- Pushing: Consolidation of the tween data followed by its push onto the global in-progress calls container.
- tick(): The single requestAnimationFrame loop responsible for tweening all in-progress calls.
- completeCall(): Handles the cleanup process for each Velocity call.
The biggest cause of both codebase bloat and codepath obfuscation is support for animating individual values of compound-value CSS properties (e.g. "textShadowBlur" in "textShadow: 0px 0px 0px black").
*/
/* NOTICE: Despite the ensuing code indicating that Velocity works *without*...