Hísi Anim

Hísi Anim is a lightweight scroll-driven entrance animation system. It has no dependencies (no jQuery, no external libraries) and is built to work with any builder: just add a CSS class to an element and it animates as it enters the viewport.

It combines two techniques:

• Scroll-linked effects (blur, scale, background zoom) built on the modern CSS animation-timeline: view().
• Clip-path reveals (right, left, top, bottom) driven by IntersectionObserver.

Designed for page builders: the script detects elements injected dynamically (MutationObserver) and includes fallbacks so animations trigger reliably even when IntersectionObserver doesn’t fire on first render.

Native Elementor controls

Classic widgets (Editor V3): a “Hísi Anim” section under each element’s Advanced tab, with entrance effect, clip-path reveal and reveal duration.

Atomic elements (Editor V4): a “Hísi Anim” section under each atomic element’s General tab, with entrance effect, clip-path reveal and reveal duration. Verified on Elementor 4.1.

Native Bricks controls

A “Hísi Anim” control group on every Bricks element (with its own icon in the Style tab and the element quick-access bar), offering entrance effect, clip-path reveal and reveal duration. Verified on Bricks 2.3.

Any other builder

In Gutenberg, Oxygen, Beaver Builder or your theme, just add the classes to the element’s “CSS classes” field:

• Base class (required): hisi-anim
• Effects: ha--scrollBlur, ha--scrollBlurLeft, ha--scrollBlurRight, ha--scrollScale, ha--scrollZoom
• Reveals: ha--clipPathRight, ha--clipPathLeft, ha--clipPathTop, ha--clipPathBottom
• Reveal duration: data-anim-time="1.2" attribute

Browser support

Scroll-linked effects use animation-timeline: view(), supported natively in Chromium browsers. For browsers without native support (e.g. Firefox), the plugin loads the scroll-timeline polyfill only when needed, so supporting browsers download nothing extra.

Credits

This plugin bundles the scroll-timeline polyfill by Robert Flack (https://github.com/flackr/scroll-timeline), licensed under the Apache License 2.0, used to support scroll-driven animations in browsers without native animation-timeline support.