Defaults, observers, and runtime control
Global Configuration & JavaScript API
Configure initialization, observer thresholds, global defaults, dynamic content, and the public HF Motion methods.
API
Global Defaults
window.HFMotionConfig = {
autoInit: true,
duration: 700,
delay: 0,
distance: 40,
easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
threshold: 0.15,
rootMargin: '0px 0px -8% 0px',
once: true,
observeMutations: true,
parallaxDistance: 120,
parallaxRootMargin: '50% 0px 50% 0px',
parallaxSmoothing: 0.075,
sets: {}
};| Option | Default | Purpose |
|---|---|---|
| autoInit | true | Initializes on DOMContentLoaded automatically. |
| duration | 700 | Default reveal duration in milliseconds. |
| delay | 0 | Default reveal delay. |
| distance | 40 | Default reveal translation distance. |
| easing | cubic-bezier(0.22, 1, 0.36, 1) | Default reveal timing function. |
| threshold | 0.15 | Intersection ratio required to trigger a reveal. |
| rootMargin | 0px 0px -8% 0px | Adjusts the reveal observer viewport boundary. |
| once | true | Global default for one-time reveals. |
| observeMutations | true | Automatically prepares dynamically inserted data-hf elements. |
| parallaxDistance | 120 | Default parallax distance. |
| parallaxRootMargin | 50% 0px 50% 0px | Keeps nearby parallax elements active before entering the viewport. |
| parallaxSmoothing | 0.075 | Controls how softly parallax follows scrolling. Lower values create a longer, floatier settle; higher values follow more tightly. |
Public API
| Method / Property | Usage |
|---|---|
| HFMotion.version | Returns the library version string. |
| HFMotion.init(options) | Initializes or updates configuration. |
| HFMotion.refresh(scope) | Finds and prepares data-hf elements inside document, an element, or a subtree. |
| HFMotion.reveal(target) | Forces reveal elements visible. Accepts a selector, element, or array-like collection. |
| HFMotion.hide(target) | Forces reveal elements hidden. |
| HFMotion.replay(target) | Replays a reveal cleanly by pausing its viewport observer, painting the hidden state, and then revealing it. |
| HFMotion.defineSet(type, name, settings) | Adds or merges a named set, then refreshes initialized elements. |
| HFMotion.destroy() | Disconnects observers/listeners and removes HF Motion state and CSS variables. |
HFMotion.refresh(document.querySelector('#dynamic-section'));
HFMotion.reveal('.modal-card');
HFMotion.hide('.modal-card');
HFMotion.replay('.demo-card');