HelPHP Javascript Documentation

Class: H_anim

H_anim

Main animation engine for keyframe-based and property-based animations.
Supports events (load, click, hover, scroll), custom keyframes, easing, looping, and callbacks.
Used for animating DOM elements with advanced options.
Returns a Promise that resolves when the animation ends and start next animation.

new H_anim(opts){Promise}

animate.js, line 244
Name Type Description
opts Object Animation options and keyframes.
Returns:
Type Description
Promise Resolves when animation completes.
Example
on an html tag, with an ID, you can set data-animate="H_anim" to indicate that this element is animated.

then in in data-anim_opts attributes you can set all your keyframes like this. :

--------------------------------------------------------

{"easing": "OutQuart","duration": "6000", "transform": ["translateY(30%)", "translateY(0%)"], "opacity": ["0", "1"],"end":{
 "easing": "OutQuart","duration": "6000", "transform": ["translateY(0%)", "translateY(30%)"], "opacity": ["1", "0"]}
}
--------------------------------------------------------

please note the "end" value : its another set of param for another keyframe.
 
but it can also contain a callaback like : ()=>{callback();} to be trigerered at the end of the annimation.
you can also set a new H_anim({params...}) successive calls with a delay value to trig each anim at different moment, or using "end" :
--------------------------------------------------------

new H_anim({ elements: "#id", duration: 1000, easing : "OutQuart", transform: ["translateY(30%)","translateY(0%)"], opacity: ["0", "1"]});
new H_anim({ elements: "#id", delay:1000, duration: 1000, easing : "OutQuart", transform: ["translateY(0%)","translateY(30%)"], opacity: ["1", "0"], end :()=>{console.log("test");}});
new H_anim({ elements: "#id", delay:2000, duration: 1000, easing : "OutQuart", transform: ["translateY(30%)","translateY(-10%)"], opacity: ["0", "1"], end :()=>{console.log("test");}});
--------------------------------------------------------

Methods

staticH_anim.add_animations(opts, keyframes, resolve)

animate.js, line 626
Adds animations to the global animation list and sets up events.
Name Type Description
opts Object Animation options.
keyframes Object Keyframes.
resolve function Promise resolve callback.

staticH_anim.add_property_keyframes(property, values, element){Object}

animate.js, line 517
Adds property keyframes for an animation.
Name Type Description
property string CSS property.
values Array Keyframe values.
element HTMLElement Target element.
Returns:
Type Description
Object Keyframe object.

staticH_anim.convert(color){Array}

animate.js, line 395
Converts hex color pairs to integer values.
Name Type Description
color string Hex color string.
Returns:
Type Description
Array Array of RGBA values.

staticH_anim.create_animation_keyframes(keyframes, index, element){Array}

animate.js, line 531
Creates animation keyframes for an element.
Name Type Description
keyframes Object Keyframes definition.
index number Element index.
element HTMLElement Target element.
Returns:
Type Description
Array Array of keyframe objects.

staticH_anim.create_styles(keyframes, easing){Object}

animate.js, line 567
Creates a styles object for the current keyframes and easing.
Name Type Description
keyframes Array Keyframe objects.
easing number Easing progress.
Returns:
Type Description
Object Styles object.

staticH_anim.decompose_easing(string){Object}

animate.js, line 473
Decomposes an easing string into its components.
Name Type Description
string string Easing string.
Returns:
Type Description
Object Easing parameters.

staticH_anim.delay(duration)

animate.js, line 674
Delays execution for a given duration.
Name Type Description
duration number Delay in ms.

staticH_anim.ease(easing, progress){number}

animate.js, line 484
Applies the specified easing to a progress value.
if used after decompose_easing, only first value is used : easing. amplitude and period not used...
Name Type Description
easing Object Easing parameters.
progress number Progress (0..1).
Returns:
Type Description
number Eased value.

staticH_anim.easings_fill()

animate.js, line 460
Fills the easings map with Bezier curves for all supported types.

staticH_anim.elastic(t, p){number}

animate.js, line 416
Elastic easing function.
Name Type Description
t number Progress (0..1).
p number Period.
Returns:
Type Description
number Eased value.

staticH_anim.first(arr){*}

animate.js, line 308
Returns the first item of an array.
Name Type Description
arr Array The array.
Returns:
Type Description
* The first item.

staticH_anim.get_current_value(from, to, easing){number}

animate.js, line 542
Computes the current value between two numbers using easing.
Name Type Description
from number Start value.
to number End value.
easing number Easing progress.
Returns:
Type Description
number Interpolated value.

staticH_anim.get_elements(elements){Array}

animate.js, line 320
Gets DOM elements from a selector, array, or element.
Name Type Description
elements string | Array | HTMLElement Selector, array, or element.
Returns:
Type Description
Array Array of DOM elements.

staticH_anim.hex_pairs(color){Array}

animate.js, line 381
Splits a hex color into pairs for RGBA conversion.
Name Type Description
color string Hex color string.
Returns:
Type Description
Array Array of hex pairs.

staticH_anim.init_click(opts)

animate.js, line 684
Initializes click event listeners for animation.
Name Type Description
opts Object Animation options.

staticH_anim.init_hover(opts)

animate.js, line 719
Initializes hover event listeners for animation.
Name Type Description
opts Object Animation options.

staticH_anim.init_scroll(opts)

animate.js, line 785
Initializes scroll event listeners for starting animation.
Name Type Description
opts Object Animation options.

staticH_anim.is_function(operand){boolean}

animate.js, line 314
Checks if the operand is a function.
Name Type Description
operand * The value to check.
Returns:
Type Description
boolean True if function.

staticH_anim.make_keyframe(elems, keyframe){Object}

animate.js, line 332
Generates keyframes for preset animations based on element position.
manipulating transform and translate values.
Name Type Description
elems Array Elements to animate.
keyframe Object Keyframe definition.
Returns:
Type Description
Object Modified keyframe.

staticH_anim.on_click(evt)

animate.js, line 694
Click event handler for animation.
Name Type Description
evt Event Click event.

staticH_anim.on_mouse_enter(evt)

animate.js, line 730
Mouse enter event handler for hover animation.
Name Type Description
evt Event Mouseover event.

staticH_anim.on_mouse_leave(evt)

animate.js, line 753
Mouse leave event handler for hover animation.
Name Type Description
evt Event Mouseout event.

staticH_anim.recompose_value(fromTo, strings, round, easing){string}

animate.js, line 553
Recomposes a CSS value from numbers and strings.
Name Type Description
fromTo Array [from, to] values.
strings Array String parts.
round boolean Whether to round values.
easing number Easing progress.
Returns:
Type Description
string Recomposed CSS value.

staticH_anim.reverse_keyframes(keyframes)

animate.js, line 577
Reverses the keyframes for inverse direction.
Name Type Description
keyframes Array Keyframe objects.

staticH_anim.rgba(hex){string}

animate.js, line 403
Converts a hex color to an rgba() CSS string.
Name Type Description
hex string Hex color string.
Returns:
Type Description
string CSS rgba() string.

staticH_anim.tick(now)

animate.js, line 818
Animation frame tick handler.
Updates all running animations and applies styles.
based on requestAnimationFrame
Name Type Description
now number Current timestamp.