Description
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.
Installation
- Upload the
hisi-animfolder to/wp-content/plugins/, or install the ZIP from Plugins > Add New > Upload Plugin. - Activate the plugin.
- In Elementor or Bricks, use the “Hísi Anim” controls on any element. In other builders, add the
hisi-animclasses manually.
FAQ
-
Does it work with my builder?
-
Elementor and Bricks have native controls. Any other builder that lets you add CSS classes to an element is also supported.
-
Does it require jQuery?
-
No. It is pure JavaScript.
-
Do animations work in Firefox?
-
Yes. Scroll-linked effects rely on a modern CSS feature not yet native in Firefox, so the plugin automatically loads a polyfill there. Browsers with native support don’t load it.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Hísi Anim” is open source software. The following people have contributed to this plugin.
Contributors
“Hísi Anim” has been translated into 1 locale. Thank you to the translators for their contributions.
Translate “Hísi Anim” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Change log
1.0.0
- Initial release.
- Front-end assets and animation engine (IntersectionObserver + MutationObserver, no jQuery).
- Native Elementor integration (classic V3 and atomic V4).
- Native Bricks integration (“Hísi Anim” control group with custom icon).
- Conditional scroll-timeline polyfill for browsers without native
animation-timeline: view().