{"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-02T10:25:25","modified_gmt":"2026-06-02T10:25:25","slug":"hisi-anim","status":"publish","type":"plugin","link":"https:\/\/sq-xk.wordpress.org\/plugins\/hisi-anim\/","author":23136213,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0","requires":"5.8","requires_php":"7.2","requires_plugins":null,"header_name":"H\u00edsi Anim","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-02 10:25:25","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":30,"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"}},"upgrade_notice":{"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"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[10079,198723,76538,790,265435],"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-scroll","plugin_tags-scroll-driven","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>H\u00edsi 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.<\/p>\n\n<p>It combines two techniques:<\/p>\n\n<ul>\n<li><strong>Scroll-linked effects<\/strong> (blur, scale, background zoom) built on the modern CSS <code>animation-timeline: view()<\/code>.<\/li>\n<li><strong>Clip-path reveals<\/strong> (right, left, top, bottom) driven by IntersectionObserver.<\/li>\n<\/ul>\n\n<p>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.<\/p>\n\n<h4>Native Elementor controls<\/h4>\n\n<p>Classic widgets (Editor V3): a \"H\u00edsi Anim\" section under each element's Advanced tab, with entrance effect, clip-path reveal and reveal duration.<\/p>\n\n<p>Atomic elements (Editor V4): a \"H\u00edsi Anim\" section under each atomic element's General tab, with entrance effect, clip-path reveal and reveal duration. Verified on Elementor 4.1.<\/p>\n\n<h4>Native Bricks controls<\/h4>\n\n<p>A \"H\u00edsi 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.<\/p>\n\n<h4>Any other builder<\/h4>\n\n<p>In Gutenberg, Oxygen, Beaver Builder or your theme, just 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>Effects: <code>ha--scrollBlur<\/code>, <code>ha--scrollBlurLeft<\/code>, <code>ha--scrollBlurRight<\/code>, <code>ha--scrollScale<\/code>, <code>ha--scrollZoom<\/code><\/li>\n<li>Reveals: <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>Browser support<\/h4>\n\n<p>Scroll-linked effects use <code>animation-timeline: view()<\/code>, supported natively in Chromium browsers. For browsers without native support (e.g. Firefox), the plugin loads the scroll-timeline polyfill <strong>only when needed<\/strong>, so supporting browsers download nothing extra.<\/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 Plugins &gt; Add New &gt; Upload Plugin.<\/li>\n<li>Activate the plugin.<\/li>\n<li>In Elementor or Bricks, use the \"H\u00edsi Anim\" controls on any element. In other builders, add the <code>hisi-anim<\/code> classes manually.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20it%20work%20with%20my%20builder%3F\"><h3>Does it work with my builder?<\/h3><\/dt>\n<dd><p>Elementor and Bricks have native controls. Any other builder that lets you add CSS classes to an element is also supported.<\/p><\/dd>\n<dt id=\"does%20it%20require%20jquery%3F\"><h3>Does it require jQuery?<\/h3><\/dt>\n<dd><p>No. It is pure JavaScript.<\/p><\/dd>\n<dt id=\"do%20animations%20work%20in%20firefox%3F\"><h3>Do animations work in Firefox?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\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-driven entrance animations via CSS classes, with native controls in Elementor and Bricks.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/320984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=320984"}],"author":[{"embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/peterjosephkings"}],"wp:attachment":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=320984"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=320984"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=320984"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=320984"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=320984"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=320984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}