Descrição
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.
Instalação
- 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.
Avaliações
There are no reviews for this plugin.
Contribuidores e desenvolvedores
“Hísi Anim” é um software com código aberto. As seguintes pessoas contribuíram para este plugin.
Contribuidores
“Hísi Anim” foi traduzido para 1 localidade. Obrigado aos tradutores por suas contribuições.
Traduzir “Hísi Anim” para o seu idioma.
Interessado no desenvolvimento?
Navegue pelo código, dê uma olhada no repositório SVN ou assine o registro de desenvolvimento via RSS.
Registro de alterações
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().