Select-Animation :JavaScript library

Multi-Selector Parallel Animation
Synchronized execution across multiple DOM elements using a single configuration.
Technical sequence: A unified event listener is bound to a collection of selectors. The engine processes the element group via selectDom, creating a synchronized vibration cycle. Unlike discrete mapping, this approach ensures all targeted elements share the same execution track and state initialization for a 1,000ms duration. 
var objectProperty={typeAnimation:"vibration",
property:"left",
from:0,
to:300,
duration:1000}

$("#div , .cube").click(animate(selectDom('#div','.cube'),objectProperty));
Single Property Event Mapping
Discrete event listeners for individual spatial components.
Technical sequence: Two independent event listeners are attached. Each listener maintains its own state machine. When a click occurs, the engine initializes a 10,000ms vibration cycle.
var objectProperty={typeAnimation:"vibration",
property:"left",
from:0,
to:300,
duration:10000}

$("#div").click(animate(selectDom('#div'),objectProperty));
$(".cube").click(animate(selectDom('.cube'),objectProperty));
Oscillatory Bounce Logic
Dual-target execution with inverse bounce easing types.
Comparison logic: Target A (.div) uses 'bounceinout' while Target B (.cube) uses 'bounceoutin'. The engine calculates 6000ms vs 3000ms cycles ensuring zero frame dropping.
var objectProperty={typeAnimation:"bounceinout",property:"left",from:0,to:500,duration:6000};
var objectProperty2={typeAnimation:"bounceoutin",property:"left",from:0,to:400,duration:3000};

$("#div").click(animate(selectDom('#div'),objectProperty));
$(".cube").click(animate(selectDom('.cube'),objectProperty2));
Mouse-State Interaction Flow
Differentiating between MouseDown and MouseEnter triggers.
The logic demonstrates the decoupling of event types from animation execution. 'circinout' is processed on click/down, while 'expoin' is calculated on hover.
var objectProperty={typeAnimation:"circinout","property":[{transform:["translateZ","rotateZ","rotateX"]},"left"],
from:300,to:0,duration:3000}
var objectProperty2={typeAnimation:"expoin",property:"top",
from:100,to:0,duration:1000}

$("#div").mousedown(animate(selectDom('#div'),objectProperty));
$(".cube").mouseenter(animate(selectDom('.cube'),objectProperty,objectProperty));
Centralized Orchestration Hub
One trigger (click) controlling multiple disparate animation sequences.
This complex setup uses '#event_here' as a master controller. When clicked, the engine dispatches style updates to both '.div' and '.cube' using different timing functions.
var objectProperty={typeAnimation:"bounceout","property":[{transform:["translateZ","rotateZ","rotateX"]},"left"],
from:300,to:0,duration:2000}
var objectProperty2={typeAnimation:"bounceout","property":"borderRadius",
from:100,to:0,duration:2000}
var objectProperty3={typeAnimation:"bounceout","property":[{transform:["translateX","rotateY","rotateZ"]},"left"],
from:0,to:300,duration:2000}

$("#event_here").click(animate(selectDom('#div'),objectProperty,objectProperty2,selectDom('.cube'),objectProperty3));
MouseMove Continuous Calculation
Real-time state updates based on high-frequency mouse movement.
Extremely technical: The 'mousemove' event fires at a high rate. The engine must efficiently clear the previous animation frame and start the new one without memory leaks.
var objectProperty={typeAnimation:"bounceout","property":[{transform:["translateY","rotateZ","rotateX"]},"left"],
from:[{transform:[100,9000,3000]},300],to:0,duration:20000}
var objectProperty2={typeAnimation:"vibration","property":[{backgroundColor:["rgbR","rgbG","rgbB"]},"borderRadius"],
from:[{backgroundColor:[10,250,10]},50],to:[{backgroundColor:[100,20,220]},0],vibrationStep:50,duration:20000}
var objectProperty3={typeAnimation:"elasticin","property":[{transform:["translateZ","rotateY","rotateZ"]},"left"],
from:[{transform:[-600,900,3000]},0],to:[{transform:[0]},400],duration:20000}

$("#event_here").mousemove(animate(selectDom('#div'),objectProperty,objectProperty2,selectDom('.cube'),objectProperty3))

var objectProperty1={typeAnimation:"vibration","property":[{backgroundColor:["rgbR","rgbG","rgbB"]},"borderRadius"],
boucle:"true",boucleType:"return",
from:[{backgroundColor:[10,250,10]},50],to:[{backgroundColor:[100,20,220]},0],vibrationStep:50,duration:10000}
var objectProperty2={typeAnimation:"elasticin",
boucle:"true",boucleType:"return",
callback:function(el,a,l){//el:DOM element, a:0-1, l:objectProperty.
    if(a==0){
    l.from=Math.floor(Math.random() * 10) + 50
    l.to=Math.floor(Math.random() * 400) + 100
   }
   el.style.transform="translateZ("+(l.to-l.from)*a+"px) rotateY("+(l.to-l.from)*a+"deg) rotateZ("+(l.to-l.from)*a+"deg)";
   el.style.left=(l.to-l.from)*a+"px";
}
,duration:2000}


$("#event_here").mousemove(animate(selectDom('#div'),objectProperty1,selectDom('.cube','#div'),objectProperty2))