{"id":880,"date":"2023-09-26T09:38:17","date_gmt":"2023-09-26T07:38:17","guid":{"rendered":"https:\/\/wypo.io\/documentations\/%taxomony%\/gutenberg-animations\/"},"modified":"2024-09-12T01:30:22","modified_gmt":"2024-09-11T23:30:22","slug":"gutenberg-animations","status":"publish","type":"wypo_documentations","link":"https:\/\/wypo.io\/en\/documentations\/gutenberg-animations\/","title":{"rendered":"Gutenberg Animations"},"content":{"rendered":"            <div class=\"hf_animated fade_bottom none default wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<h2 class=\"wp-block-heading   \" datalink=\"content-requirements\">Requirements<\/h2>\n\n\n\n<ul class=\"wp-block-list is-style-important   \">\n<li class=\"\"><strong>WordPress<\/strong> : Version 5.9 or higher<\/li>\n\n\n\n<li class=\"\"><strong>PHP<\/strong> : Version 7.0 or higher<\/li>\n<\/ul>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n            <div class=\"is-style-normal wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<div class=\"wp-block-group   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-installation\">Installation<\/h2>\n\n\n\n<p class=\"\">To install the plugin, please refer to the &#8220;<a href=\"https:\/\/wypo.io\/en\/complete-guide-installing-wordpress-plugin\/\">Installing a plugin<\/a>&#8221; documentation.  <\/p>\n<\/div>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-example\">Example<\/h2>\n\n\n      <div class=\"animations_render\" id=\"block_6a0e714a5a83f\">\n        <div class=\"animations_render_render\">\n          <span id=\"render_6a0e714a5a83f\">Example<\/span>\n        <\/div>\n        <div id=\"animations_6a0e714a5a83f\" class=\"animations_render_groups\">\n                        <div class=\"animations_render_groups_item\">\n                <h3 class=\"wp-block-heading\" datalink=\"content-fading\">Fading                <\/h3>\n                <div class=\"animations_render_groups_row\">\n                                      <div class=\"animations_render_groups_animation\" data-key=\"fade_in\">\n                      Fade in                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_left\">\n                      Fade in left                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_right\">\n                      Fade in right                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_top\">\n                      Fade in top                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_bottom\">\n                      Fade in bottom                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_left_big\">\n                      Fade in left big                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_right_big\">\n                      Fade in right big                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_top_big\">\n                      Fade in top big                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_bottom_big\">\n                      Fade in bottom big                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_top_left\">\n                      Fade in top left                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_top_right\">\n                      Fade in top right                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_bottom_left\">\n                      Fade in bottom left                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"fade_bottom_right\">\n                      Fade in bottom right                    <\/div>\n                                    <\/div>\n              <\/div>\n                            <div class=\"animations_render_groups_item\">\n                <h3 class=\"wp-block-heading\" datalink=\"content-zoom\">Zoom                <\/h3>\n                <div class=\"animations_render_groups_row\">\n                                      <div class=\"animations_render_groups_animation\" data-key=\"zoom_in\">\n                      Zoom in                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"zoom_in_down\">\n                      Zoom in Down                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"zoom_in_left\">\n                      Zoom in Left                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"zoom_in_right\">\n                      Zoom in Right                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"zoom_in_up\">\n                      Zoom in Up                    <\/div>\n                                    <\/div>\n              <\/div>\n                            <div class=\"animations_render_groups_item\">\n                <h3 class=\"wp-block-heading\" datalink=\"content-bounce\">Bounce                <\/h3>\n                <div class=\"animations_render_groups_row\">\n                                      <div class=\"animations_render_groups_animation\" data-key=\"bouncein\">\n                      Bounce in                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"bounceindown\">\n                      Bounce in Down                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"bounceinleft\">\n                      Bounce in Left                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"bounceinright\">\n                      Bounce in Right                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"bounceinup\">\n                      Bounce in Up                    <\/div>\n                                    <\/div>\n              <\/div>\n                            <div class=\"animations_render_groups_item\">\n                <h3 class=\"wp-block-heading\" datalink=\"content-rotate\">Rotate                <\/h3>\n                <div class=\"animations_render_groups_row\">\n                                      <div class=\"animations_render_groups_animation\" data-key=\"rotatein\">\n                      Rotate in                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"rotateindownleft\">\n                      Rotate in down left                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"rotateindownright\">\n                      Rotate in down right                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"rotateinupleft\">\n                      Rotate in up left                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"rotateinupright\">\n                      Rotate in up right                    <\/div>\n                                    <\/div>\n              <\/div>\n                            <div class=\"animations_render_groups_item\">\n                <h3 class=\"wp-block-heading\" datalink=\"content-attention-seekers\">Attention seekers                <\/h3>\n                <div class=\"animations_render_groups_row\">\n                                      <div class=\"animations_render_groups_animation\" data-key=\"bounce\">\n                      Bounce                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"flash\">\n                      Flash                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"pulse\">\n                      Pulse                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"rubberband\">\n                      Rubber band                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"shakex\">\n                      Shake X                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"shakey\">\n                      Shake Y                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"headshake\">\n                      Head shake                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"swing\">\n                      Swing                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"tada\">\n                      Tada                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"wobble\">\n                      Wobble                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"jello\">\n                      Jello                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"heartbeat\">\n                      Heart beat                    <\/div>\n                                    <\/div>\n              <\/div>\n                            <div class=\"animations_render_groups_item\">\n                <h3 class=\"wp-block-heading\" datalink=\"content-special\">Special                <\/h3>\n                <div class=\"animations_render_groups_row\">\n                                      <div class=\"animations_render_groups_animation\" data-key=\"jackinthebox\">\n                      Jack in the box                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"rollin\">\n                      Roll in                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"lightspeedinright\">\n                      Light speed in right                    <\/div>\n                                        <div class=\"animations_render_groups_animation\" data-key=\"lightspeedinleft\">\n                      Light speed in left                    <\/div>\n                                    <\/div>\n              <\/div>\n                      <\/div>\n        <script>\n          (function () {\n            window.addEventListener(\"DOMContentLoaded\", function () {\n              const renderNode = document.getElementById(\"render_6a0e714a5a83f\");\n              const animationsNode = document.getElementById(\"animations_6a0e714a5a83f\");\n              const blockNode = document.getElementById(\"block_6a0e714a5a83f\");\n              if (renderNode) {\n                if (blockNode) {\n                  if (animationsNode) {\n                    const itemsNode = animationsNode.getElementsByClassName(\"animations_render_groups_animation\");\n                    if (itemsNode) {\n                      for (var i = 0; i < itemsNode.length; i++) {\n                        const item = itemsNode[i];\n                        item.addEventListener(\"click\", function () {\n                          const key = item.getAttribute(\"data-key\");\n                          if (key) {\n                            renderNode.className = \"hf_animated none default no_transition \" + key;\n                            blockNode.scrollIntoView({ behavior: \"smooth\" });\n                            if (renderNode.classList.contains(\"no_transition\")) {\n                              renderNode.classList.remove(\"no_transition\");\n                            }\n                            setTimeout(function () {\n                              const event = new Event(\"scroll\");\n                              window.dispatchEvent(event);\n                            }, 300);\n                          }\n                        });\n                      }\n                    }\n                  }\n                }\n              }\n            })\n          })();\n        <\/script>\n      <\/div>\n      <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-personalization\">Personalization<\/h2>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-blocks\">Blocks<\/h3>\n\n\n\n<p class=\"\">By default, animations are available on all blocks, but you can exclude blocks by entering the following PHP code in your theme's functions.php file:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-431295091\"\n        id=\"codemirror-431295091\"\n      >add_filter( &quot;habefast_gutenberg_animations_get_excludes_blocks&quot;,function($array){\n\t$exludesBlocks = &#91;&quot;core\/heading&quot;&#93;; \/\/array with excluded blocks name\n   \treturn array_merge($exludesBlocks,$array);\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-431295091'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-default-values\">Default values<\/h3>\n\n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-default-groups\">Default groups<\/h4>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-6377986\"\n        id=\"codemirror-6377986\"\n      >&#91;\n\t&quot;fadein&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&quot;Fading&quot;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;zoom&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&quot;Zoom&quot;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;bounce&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&quot;Bounce&quot;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;rotate&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&quot;Rotate&quot;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;attention&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&quot;Attention seekers&quot;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;special&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&quot;Special&quot;, &quot;habefast-gutenberg-animations&quot;)&#93;\n&#93;<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-6377986'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-default-animations\">Default animations<\/h4>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1518421078\"\n        id=\"codemirror-1518421078\"\n      >&quot;animationsList&quot; =&gt; &#91;\n\t&quot;none&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;None&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;fade_in&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_left&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_right&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_top&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in top&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_bottom&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in bottom&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_left_big&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in left big&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_right_big&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in right big&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_top_big&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in top big&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_bottom_big&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in bottom big&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_top_left&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in top left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_top_right&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in top right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_bottom_left&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in bottom left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;fade_bottom_right&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fade in bottom right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;fadein&quot;&#93;,\n    &quot;zoom_in&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Zoom in&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;zoom&quot;&#93;,\n    &quot;zoom_in_down&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Zoom in Down&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;zoom&quot;&#93;,\n    &quot;zoom_in_left&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Zoom in Left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;zoom&quot;&#93;,\n    &quot;zoom_in_right&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Zoom in Right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;zoom&quot;&#93;,\n    &quot;zoom_in_up&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Zoom in Up&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;zoom&quot;&#93;,\n    &quot;bouncein&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Bounce in&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;bounce&quot;&#93;,\n    &quot;bounceindown&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Bounce in Down&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;bounce&quot;&#93;,\n    &quot;bounceinleft&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Bounce in Left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;bounce&quot;&#93;,\n    &quot;bounceinright&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Bounce in Right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;bounce&quot;&#93;,\n    &quot;bounceinup&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Bounce in Up&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;bounce&quot;&#93;,\n    &quot;rotatein&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Rotate in&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;rotate&quot;&#93;,\n    &quot;rotateindownleft&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Rotate in down left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;rotate&quot;&#93;,\n    &quot;rotateindownright&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Rotate in down right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;rotate&quot;&#93;,\n    &quot;rotateinupleft&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Rotate in up left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;rotate&quot;&#93;,\n    &quot;rotateinupright&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Rotate in up right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;rotate&quot;&#93;,\n    &quot;bounce&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Bounce&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;flash&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Flash&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;pulse&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Pulse&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;rubberband&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Rubber band&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;shakex&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Shake X&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;shakey&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Shake Y&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;headshake&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Head shake&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;swing&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Swing&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;tada&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Tada&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;wobble&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Wobble&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;jello&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Jello&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;heartbeat&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Heart beat&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;attention&quot;&#93;,\n    &quot;jackinthebox&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Jack in the box&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;special&quot;&#93;,\n    &quot;rollin&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Roll in&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;special&quot;&#93;,\n    &quot;lightspeedinright &quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Light speed in right&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;special&quot;&#93;,\n    &quot;lightspeedinleft&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Light speed in left&#039;, &quot;habefast-gutenberg-animations&quot;), &quot;group&quot; =&gt; &quot;special&quot;&#93;,\n&#93;,<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1518421078'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-default-delays\">Default delays<\/h4>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1087006584\"\n        id=\"codemirror-1087006584\"\n      >&quot;delayList&quot; =&gt; &#91;\n\t&quot;none&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;None&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;d-100ms&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;100 Milliseconds&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;d-200ms&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;200 Milliseconds&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;d-500ms&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;500 Milliseconds&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;d-1s&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;One Second&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;d-2s&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Two Seconds&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n\t&quot;d-3s&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Three Seconds&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n&#93;,<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1087006584'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-default-speed\">Default speed<\/h4>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-2077368589\"\n        id=\"codemirror-2077368589\"\n      >&quot;speedList&quot; =&gt; &#91;\n\t&quot;none&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;None&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;slow&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Slow&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;slower&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Slower&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;default&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Default&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n    &quot;fast&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Fast&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n\t&quot;faster&quot; =&gt; &#91;&quot;label&quot; =&gt; __(&#039;Faster&#039;, &quot;habefast-gutenberg-animations&quot;)&#93;,\n&#93;<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-2077368589'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading   \" style=\"padding-top:0\" datalink=\"content-add-an-animation\">Add an animation<\/h3>\n\n\n\n<p class=\"\">To add a new animation, you need to add it to the block settings and add the associated CSS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-add-the-animation-to-the-gutenberg-editor\">Add the animation to the Gutenberg editor<\/h4>\n\n\n\n<p class=\"\">To add the animation to the Gutenberg editor, you can use the following PHP code by pasting it into your child theme's <code>functions.php<\/code> file.<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1976316650\"\n        id=\"codemirror-1976316650\"\n      >add_filter(&quot;habefast_gutenberg_animations_get_animations_datas&quot;,function($array){\n  \tif(isset($array&#91;&quot;animationsList&quot;&#93;)){\n    \t$array&#91;&quot;animationsList&quot;&#93;&#91;&quot;custom_rotate&quot;&#93; = &#91;&quot;label&quot;=&gt;&quot;Custom Rotate&quot;, &quot;group&quot;=&gt;&quot;rotate&quot;&#93;;\n  \t}\n  \treturn $array;\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1976316650'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-add-the-style-associated-with-the-new-animation\">Add the style associated with the new animation<\/h4>\n\n\n\n<p class=\"\">In the <code>style.css<\/code> file of your child theme, you can add the associated CSS code. Here's an example:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-css\">\n          CSS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1337258868\"\n        id=\"codemirror-1337258868\"\n      >.hf_animated.custom_rotate{\n\ttransform: rotateX(720deg);\n    transform-origin: center bottom;\n    opacity: 0;\n    -webkit-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);\n    -moz-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);\n    -o-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);\n    transition: all 1500ms cubic-bezier(0.23,1,0.32,1);\n    transform-style: preserve-3d;\n}\n.hf_animated.custom_rotate.active{\n \ttransform: rotateX(0);\n \topacity: 1;\n}<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1337258868'), {\n          mode: 'css',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading   \" style=\"padding-top:0\" datalink=\"content-delete-an-animation\">Delete an animation<\/h3>\n\n\n\n<p class=\"\">To delete an animation, you can use the following example code in the <code>functions.php<\/code> file of your child theme:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-951999731\"\n        id=\"codemirror-951999731\"\n      >add_filter(&quot;habefast_gutenberg_animations_get_animations_datas&quot;,function($array){\n  \tif(isset($array&#91;&quot;animationsList&quot;&#93;)){\n    \tif(isset($array&#91;&quot;animationsList&quot;&#93;&#91;&quot;zoom_in&quot;&#93;)){\n      \t\tunset($array&#91;&quot;animationsList&quot;&#93;&#91;&quot;zoom_in&quot;&#93;);\n\t\t}\n\t}\n \treturn $array;\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-951999731'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading   \" style=\"padding-top:0\" datalink=\"content-add-a-delay\">Add a delay<\/h3>\n\n\n\n<p class=\"\">To add a new delay, you need to add this delay in the block settings and add the associated CSS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-add-the-delay-to-the-gutenberg-editor\">Add the delay to the Gutenberg editor<\/h4>\n\n\n\n<p class=\"\">To add the delay to the Gutenberg editor, you can use the following PHP code by pasting it into your child theme's <code>functions.php<\/code> file.<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-2058341340\"\n        id=\"codemirror-2058341340\"\n      >add_filter(&quot;habefast_gutenberg_animations_get_animations_datas&quot;,function($array){\n\tif(isset($array&#91;&quot;delayList&quot;&#93;)){\n\t\t$array&#91;&quot;delayList&quot;&#93;&#91;&quot;delay-custom&quot;&#93; = &#91;&quot;label&quot;=&gt;&quot;Custom delay&quot;&#93;;\n\t}\n\treturn $array;\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-2058341340'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-add-the-style-associated-with-the-new-delay\">Add the style associated with the new delay<\/h4>\n\n\n\n<p class=\"\">In the <code>style.css<\/code> file of your child theme, you can add the associated CSS code. Here's an example:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-css\">\n          CSS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-271757988\"\n        id=\"codemirror-271757988\"\n      >.hf_animated.delay-custom{\n\ttransition-delay: 1.800s !important;\n}<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-271757988'), {\n          mode: 'css',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading   \" style=\"padding-top:0\" datalink=\"content-delete-a-delay\">Delete a delay<\/h3>\n\n\n\n<p class=\"\">To remove a delay, you can use the following example code in the <code>functions.php<\/code> file of your child theme:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1465730809\"\n        id=\"codemirror-1465730809\"\n      >add_filter(&quot;habefast_gutenberg_animations_get_animations_datas&quot;,function($array){\n  \tif(isset($array&#91;&quot;animationsList&quot;&#93;)){\n    \tif(isset($array&#91;&quot;animationsList&quot;&#93;&#91;&quot;zoom_in&quot;&#93;)){\n      \t\tunset($array&#91;&quot;animationsList&quot;&#93;&#91;&quot;zoom_in&quot;&#93;);\n\t\t}\n\t}\n \treturn $array;\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1465730809'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading   \" style=\"padding-top:0\" datalink=\"content-add-a-speed\">Add a speed<\/h3>\n\n\n\n<p class=\"\">To add a new speed, you need to add this delay in the block settings and add the associated CSS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-add-speed-to-the-gutenberg-editor\">Add speed to the Gutenberg editor<\/h4>\n\n\n\n<p class=\"\">To add speed to the Gutenberg editor, you can use the following PHP code by pasting it into your child theme's <code>functions.php<\/code> file.<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-451181969\"\n        id=\"codemirror-451181969\"\n      >add_filter(&quot;habefast_gutenberg_animations_get_animations_datas&quot;,function($array){\n\tif(isset($array&#91;&quot;speedList&quot;&#93;)){\n\t\t$array&#91;&quot;speedList&quot;&#93;&#91;&quot;custom-speed&quot;&#93; = &#91;&quot;label&quot;=&gt;&quot;Custom speed&quot;&#93;;\n\t}\n\treturn $array;\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-451181969'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<h4 class=\"wp-block-heading   \" datalink=\"content-add-the-style-associated-with-the-new-speed\">Add the style associated with the new speed<\/h4>\n\n\n\n<p class=\"\">In the <code>style.css<\/code> file of your child theme, you can add the associated CSS code. Here's an example:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-css\">\n          CSS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1023461012\"\n        id=\"codemirror-1023461012\"\n      >.hf_animated.custom-speed{\n\ttransition-duration: 1.750s !important;\n}<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1023461012'), {\n          mode: 'css',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading   \" style=\"padding-top:0\" datalink=\"content-delete-a-speed\">Delete a speed<\/h3>\n\n\n\n<p class=\"\">To delete a speed, you can use the following example code in the <code>functions.php<\/code> file of your child theme:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1386677971\"\n        id=\"codemirror-1386677971\"\n      >add_filter(&quot;habefast_gutenberg_animations_get_animations_datas&quot;,function($array){\n\tif(isset($array&#91;&quot;speedList&quot;&#93;)){\n\t\tif(isset($array&#91;&quot;speedList&quot;&#93;&#91;&quot;slow&quot;&#93;)){\n        \tunset($array&#91;&quot;speedList&quot;&#93;&#91;&quot;slow&quot;&#93;);\n\t\t}\n\t}\n \treturn $array;\n},11);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1386677971'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    <\/div>\n","protected":false},"featured_media":0,"parent":0,"menu_order":47,"template":"","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Gutenberg Animations plugin documentation [separator] [sitetitle]","hf_wpseo_meta_description":"Discover the complete guide to using the animation plugin for Gutenberg. Learn how to install, customize and optimize animations for your Gutenberg blocks to enhance the interactivity and visual appeal of your WordPress site.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","documentation_description":"The Gutenberg Animations plugin lets you add animations to all Gutenberg blocks.\n\nYou can animate each block with predefined animations, and modify the animation delay and duration.","documentation_menu_text":"","documentation_related_pageid":183,"wypo_hidden_role_wypo_users_not_logged":false,"wypo_visibility_role_wypo_users_not_logged":false,"wypo_hidden_role_administrator":false,"wypo_visibility_role_administrator":false,"wypo_hidden_role_habefast":false,"wypo_visibility_role_habefast":false,"wypo_hidden_role_customer":false,"wypo_visibility_role_customer":false,"wypo_hidden_role_habefast_manager":false,"wypo_visibility_role_habefast_manager":false,"wypo_hidden_for_role":false,"wypo_visibility_for_role":false},"class_list":["post-880","wypo_documentations","type-wypo_documentations","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations\/880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/wypo_documentations"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}