Select-Animation

Transform-Z Axis & 3D Rotation
Complex 3D space manipulation using the Transform property array.
The technical logic here involves parsing an array of transform functions. The engine decomposes 'translateZ', 'rotateZ', and 'rotateX' into individual matrices, applying 'elasticoutin' easing to create an organic spring-back effect in 3D perspective.
var objectProperty={typeAnimation:"elasticoutin",
property:[{transform:["translateZ","rotateZ","rotateX"]},"left"],
from:300,
to:0,
duration:2000
}  
animate(selectDom('.div','.cube'),objectProperty)();
Bounced Coordinate Transition
Vertical and horizontal movement synchronization with bounce physics.
Execution flow: The animator monitors both 'left' and 'top' properties. Using 'bouncein' easing, it calculates a decaying oscillation curve, ensuring that both scalar values reach their destination (0) with physics-simulated jitter.
var objectProperty={typeAnimation:"bouncein",
property:[{transform:["translateZ","rotateZ","rotateX"]},"left","top"],
from:100,
to:0,
duration:2000}  
animate(selectDom('.div','.cube'),objectProperty)();
Multi-Object Sequential Logic
Handling multiple animation definitions for disparate element groups.
This script executes two distinct animation cycles. The first utilizes 'circinout' for smooth acceleration/deceleration of the cube, while the second uses 'expoin' for a rapid exponential snap on the header.
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}
animate(selectDom('.div','.cube'),objectProperty,objectProperty2)();
Selective Property Targeting
Detailed mapping of specific properties to specific DOM targets.
A deep dive into target-specific logic: The parameters are structured to deliver 'borderRadius' changes to '.div' while simultaneously providing 3D translation to '.cube'.
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}
animate(selectDom('.div'),objectProperty,objectProperty2,selectDom('.cube'),objectProperty3)();
Color Spectrum & Scale Processing
Dynamic RGB interpolation combined with scale transformations.
Technical logic: The engine breaks down 'backgroundColor' into R, G, and B components. It performs linear interpolation between the source RGB and destination synchronised with the 'translateY' coordinate system.
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}
animate(selectDom('.div'),objectProperty,objectProperty2,selectDom('.cube'),objectProperty3)();
Advanced Callback & Loop Engine
Infinite loop animations with real-time logic modification via callbacks.
The pinnacle of the engine's capability: It utilizes 'boucle: true'. The callback function intercepts the animation frame, allowing dynamic recalculation of 'from/to' values using Math.random().
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}
animate(selectDom('.div'),objectProperty1,selectDom('.cube','.div'),objectProperty2)();