{"id":320984,"date":"2026-06-02T10:25:47","date_gmt":"2026-06-02T10:25:47","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/hisi-anim\/"},"modified":"2026-06-03T08:58:18","modified_gmt":"2026-06-03T08:58:18","slug":"hisi-anim","status":"publish","type":"plugin","link":"https:\/\/tuk.wordpress.org\/plugins\/hisi-anim\/","author":23136213,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.1.0","stable_tag":"1.1.0","tested":"7.0","requires":"5.8","requires_php":"7.2","requires_plugins":null,"header_name":"H\u00edsi Anim \u2013 Scroll Animations for Elementor, Bricks & Gutenberg","header_author":"Peter Joseph K. Roderickson","header_description":"Lightweight scroll-driven entrance animations via CSS classes, with native controls in Elementor and Bricks. Works with any builder that lets you add CSS classes.","assets_banners_color":"f5f5f5","last_updated":"2026-06-03 08:58:18","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":50,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"peterjosephkings","date":"2026-06-02 10:25:25"},"1.1.0":{"tag":"1.1.0","author":"peterjosephkings","date":"2026-06-03 08:58:18"}},"upgrade_notice":{"1.1.0":"<p>Adds 10 new scroll and reveal animations, a live in-editor preview, on-canvas playback and grouped selectors, plus Elementor and Bricks fixes. No breaking changes.<\/p>","1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3557821,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3557821,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3557821,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3557821,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[10079,198723,76538,2693,234415],"plugin_category":[],"plugin_contributors":[265436],"plugin_business_model":[],"class_list":["post-320984","plugin","type-plugin","status-publish","hentry","plugin_tags-animations","plugin_tags-bricks","plugin_tags-elementor","plugin_tags-parallax","plugin_tags-scroll-animations","plugin_contributors-peterjosephkings","plugin_committers-peterjosephkings"],"banners":{"banner":"https:\/\/ps.w.org\/hisi-anim\/assets\/banner-772x250.png?rev=3557821","banner_2x":"https:\/\/ps.w.org\/hisi-anim\/assets\/banner-1544x500.png?rev=3557821","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/hisi-anim\/assets\/icon-128x128.png?rev=3557821","icon_2x":"https:\/\/ps.w.org\/hisi-anim\/assets\/icon-256x256.png?rev=3557821","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p><strong>H\u00edsi Anim<\/strong> adds smooth, modern <strong>scroll animations<\/strong> to any WordPress site \u2014 without bloat, without jQuery and without writing a single line of code. Pick an effect, and your headings, images, containers and sections animate beautifully as the visitor scrolls.<\/p>\n\n<p>It is built for page builders: <strong>Elementor<\/strong> (classic and the new V4 atomic elements) and <strong>Bricks<\/strong> get native controls baked right into the editor, and <strong>any other builder<\/strong> \u2014 Gutenberg (block editor), Oxygen, Beaver Builder or your own theme \u2014 works too by simply adding a CSS class.<\/p>\n\n<p>H\u00edsi Anim combines two complementary techniques so you get the best of both worlds:<\/p>\n\n<ul>\n<li><strong>Entrance effects<\/strong> \u2014 scroll-driven animations built on the modern CSS <code>animation-timeline: view()<\/code>. They progress <em>as you scroll<\/em>, tying the motion to the reading pace for a premium, high-end feel.<\/li>\n<li><strong>Reveals<\/strong> \u2014 triggered once when the element enters the viewport (IntersectionObserver), perfect for clean, one-shot entrances.<\/li>\n<\/ul>\n\n<p>You can even combine one Entrance effect with one Reveal on the same element and both play together, elegantly.<\/p>\n\n<h4>Why H\u00edsi Anim<\/h4>\n\n<ul>\n<li><strong>Truly lightweight &amp; fast<\/strong> \u2014 pure vanilla JavaScript, no jQuery and no heavy libraries. Supporting browsers load nothing extra.<\/li>\n<li><strong>No code required<\/strong> \u2014 choose effects from a dropdown in Elementor and Bricks; everywhere else, add a class.<\/li>\n<li><strong>See it while you build<\/strong> \u2014 a live preview of the selected animation right inside the editor panel, plus animations that play on the canvas.<\/li>\n<li><strong>Accessible by default<\/strong> \u2014 fully respects the visitor's <code>prefers-reduced-motion<\/code> setting.<\/li>\n<li><strong>Works everywhere<\/strong> \u2014 modern CSS where supported, with an automatic polyfill for browsers like Firefox, loaded only when needed.<\/li>\n<\/ul>\n\n<h4>Animations included<\/h4>\n\n<p><strong>Entrance effects (scroll-driven):<\/strong> Blur (vertical, left, right), Scale, Background zoom, Parallax, 3D rotate, Dim to light, Skew and Horizontal drift.<\/p>\n\n<p><strong>Reveals (on viewport entry):<\/strong> Blur up, Scale in, 3D tilt, Drift, Line reveal and Clip-path reveals (top, right, bottom, left).<\/p>\n\n<h4>Native Elementor controls<\/h4>\n\n<p>A dedicated <strong>H\u00edsi Anim<\/strong> section is added to every element:<\/p>\n\n<ul>\n<li><strong>Classic widgets (Editor V3):<\/strong> under the Advanced tab \u2014 entrance effect, reveal and reveal duration.<\/li>\n<li><strong>Atomic elements (Editor V4):<\/strong> under the General tab \u2014 same controls, native to the new atomic widgets.<\/li>\n<\/ul>\n\n<h4>Native Bricks controls<\/h4>\n\n<p>A <strong>H\u00edsi Anim<\/strong> control group on every Bricks element, with its own icon in the Style tab and in the element quick-access bar \u2014 entrance effect, reveal and reveal duration.<\/p>\n\n<h4>Any other builder (Gutenberg, Oxygen, Beaver Builder\u2026)<\/h4>\n\n<p>Add the classes to the element's \"CSS classes\" field:<\/p>\n\n<ul>\n<li>Base class (required): <code>hisi-anim<\/code><\/li>\n<li>Entrance effects: <code>ha--scrollBlur<\/code>, <code>ha--scrollBlurLeft<\/code>, <code>ha--scrollBlurRight<\/code>, <code>ha--scrollScale<\/code>, <code>ha--scrollZoom<\/code>, <code>ha--scrollParallax<\/code>, <code>ha--scrollRotate<\/code>, <code>ha--scrollDim<\/code>, <code>ha--scrollSkew<\/code>, <code>ha--scrollDriftX<\/code><\/li>\n<li>Reveals: <code>ha--blurUp<\/code>, <code>ha--scaleIn<\/code>, <code>ha--tiltIn<\/code>, <code>ha--drift<\/code>, <code>ha--lineReveal<\/code>, <code>ha--clipPathRight<\/code>, <code>ha--clipPathLeft<\/code>, <code>ha--clipPathTop<\/code>, <code>ha--clipPathBottom<\/code><\/li>\n<li>Reveal duration: <code>data-anim-time=\"1.2\"<\/code> attribute<\/li>\n<\/ul>\n\n<h4>Built for page builders<\/h4>\n\n<p>The engine detects elements injected dynamically (MutationObserver) and includes robust fallbacks, so animations trigger reliably even when the builder re-renders the page or IntersectionObserver doesn't fire on first paint.<\/p>\n\n<h3>Credits<\/h3>\n\n<p>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 <code>animation-timeline<\/code> support.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>hisi-anim<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install the ZIP from <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>.<\/li>\n<li>Activate the plugin through the <strong>Plugins<\/strong> screen.<\/li>\n<li>In <strong>Elementor<\/strong> or <strong>Bricks<\/strong>, open any element and use the <strong>H\u00edsi Anim<\/strong> controls. In other builders, add the <code>hisi-anim<\/code> classes to the element.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20it%20work%20with%20elementor%3F\"><h3>Does it work with Elementor?<\/h3><\/dt>\n<dd><p>Yes \u2014 natively. You get a H\u00edsi Anim section with effect, reveal and duration controls on both classic widgets (Editor V3) and the new atomic elements (Editor V4).<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20bricks%20builder%3F\"><h3>Does it work with Bricks Builder?<\/h3><\/dt>\n<dd><p>Yes \u2014 natively. A H\u00edsi Anim control group is added to every Bricks element, with its own icon in the Style tab and the quick-access bar.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20gutenberg%2C%20oxygen%20or%20beaver%20builder%3F\"><h3>Does it work with Gutenberg, Oxygen or Beaver Builder?<\/h3><\/dt>\n<dd><p>Yes. Any builder that lets you add a CSS class to an element is supported: add <code>hisi-anim<\/code> plus the effect\/reveal class to the element.<\/p><\/dd>\n<dt id=\"does%20it%20require%20jquery%3F\"><h3>Does it require jQuery?<\/h3><\/dt>\n<dd><p>No. H\u00edsi Anim is pure, dependency-free JavaScript.<\/p><\/dd>\n<dt id=\"will%20it%20slow%20down%20my%20site%3F\"><h3>Will it slow down my site?<\/h3><\/dt>\n<dd><p>No. It is intentionally lightweight, uses modern CSS for the heavy lifting, and only loads the compatibility polyfill on browsers that need it.<\/p><\/dd>\n<dt id=\"can%20i%20preview%20the%20animation%20inside%20the%20editor%3F\"><h3>Can I preview the animation inside the editor?<\/h3><\/dt>\n<dd><p>Yes. The H\u00edsi Anim panel shows a live preview of the selected animation, and effects also play on the editor canvas while you build.<\/p><\/dd>\n<dt id=\"do%20animations%20work%20in%20firefox%20and%20safari%3F\"><h3>Do animations work in Firefox and Safari?<\/h3><\/dt>\n<dd><p>Yes. Scroll-driven effects use a modern CSS feature; on browsers without native support the plugin automatically loads a polyfill, while supporting browsers download nothing extra.<\/p><\/dd>\n<dt id=\"is%20it%20accessible%3F\"><h3>Is it accessible?<\/h3><\/dt>\n<dd><p>Yes. All animations respect the visitor's \"reduce motion\" operating-system preference (<code>prefers-reduced-motion<\/code>).<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>New entrance effects (scroll-driven): Parallax, 3D rotate, Dim to light, Skew and Horizontal drift.<\/li>\n<li>New reveal animations: Blur up, Scale in, 3D tilt, Drift and Line reveal.<\/li>\n<li>New: live preview of the selected animation inside the Elementor and Bricks panels.<\/li>\n<li>New: animations now play inside the editor canvas (Elementor and Bricks) while you build.<\/li>\n<li>New: grouped, labelled options in the Elementor selectors (classic and atomic).<\/li>\n<li>Improvement: refined ease-out curves and full <code>prefers-reduced-motion<\/code> support across all effects.<\/li>\n<li>Improvement: effects reorganized into Entrance (scroll-driven) and Reveal categories.<\/li>\n<li>Fix (Elementor V4): the reveal-duration control no longer reports an invalid value.<\/li>\n<li>Fix (Bricks): the H\u00edsi Anim quick-access icon now opens its control group on the first click.<\/li>\n<li>Fix (editors): clip-path reveals no longer leave the element hidden when it is selected.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Front-end assets and animation engine (IntersectionObserver + MutationObserver, no jQuery).<\/li>\n<li>Native Elementor integration (classic V3 and atomic V4).<\/li>\n<li>Native Bricks integration (\"H\u00edsi Anim\" control group with custom icon).<\/li>\n<li>Conditional scroll-timeline polyfill for browsers without native <code>animation-timeline: view()<\/code>.<\/li>\n<\/ul>","raw_excerpt":"Lightweight scroll animations and reveal effects for Elementor, Bricks and any builder. Parallax, blur, clip-path reveals and more \u2014 no jQuery.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/320984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=320984"}],"author":[{"embeddable":true,"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/peterjosephkings"}],"wp:attachment":[{"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=320984"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=320984"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=320984"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=320984"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=320984"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/tuk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=320984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}