the-animated-heading-block.json

{
  "blocks": [
    {
      "title": "Animated heading",
      "content": "<!-- wp:heading {\"className\":\"is-animated-heading\"} -->\n<h2 class=\"is-animated-heading\">The animated heading</h2>\n<!-- /wp:heading -->",
      "slug": "animated-heading",
      "meta": {
        "BoldBlocksTypography": [],
        "boldblocks_block_blocks": "[{\"name\":\"core/heading\",\"attributes\":{\"content\":\"The animated heading\",\"level\":2,\"className\":\"is-animated-heading\",\"boldblocks\":{}},\"innerBlocks\":[]}]",
        "boldblocks_block_dependent_blocks": [
          "core/heading"
        ],
        "boldblocks_block_class": "",
        "boldblocks_block_description": "",
        "boldblocks_block_icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 20 20\" class=\"bb-icon bb-icon--heading\">\n  <path d=\"M12.5 4v5.2h-5V4H5v13h2.5v-5.2h5V17H15V4z\"></path>\n</svg>",
        "boldblocks_block_supports": {
          "textAlignment": true,
          "spacing": true
        },
        "boldblocks_template_lock": "all",
        "boldblocks_enable_variation_picker": false,
        "boldblocks_enable_repeater": false,
        "boldblocks_parent_layout_type": "vstack",
        "boldblocks_parent_block_icon": "",
        "boldblocks_parent_block_supports": [],
        "boldblocks_parent_enable_variation_picker": false,
        "boldblocks_disable_standalone": false,
        "boldblocks_is_fixed_nested_item_count": false,
        "boldblocks_nested_item_count": 1,
        "boldblocks_parent_block_name": "",
        "boldblocks_parent_block_title": "",
        "boldblocks_parent_block_description": "",
        "boldblocks_parent_block_class": "",
        "boldblocks_block_version": "2.3.0",
        "boldblocks_block_external_scripts": [
          {
            "src": "https://cdn.jsdelivr.net/npm/[email protected]/dist/splitting.min.js",
            "handle": "splitting",
            "deps": "",
            "version": "",
            "in_footer": true
          }
        ],
        "boldblocks_block_custom_scripts": [
          {
            "handle": "splitting",
            "value": "(() => {\n  const animatedClass = 'is-animated';\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      animateElement(entry.target, entry.isIntersecting);      \n    });\n  }, {rootMargin: '0px'});\n\n  const animateElement = (element, isToggle) => {\n    element.classList.toggle(animatedClass, isToggle);\n  }\n\n  const headingElements = document.querySelectorAll('BLOCKSELECTOR .is-animated-heading');\n  if (headingElements.length) {\n    headingElements.forEach((animatedElement) => {\n      Splitting({\n        target: animatedElement,\n      });\n\n      observer.observe(animatedElement);\n    });\n  }\n})();"
          }
        ],
        "boldblocks_block_external_styles": [
          {
            "src": "https://cdn.jsdelivr.net/npm/[email protected]/dist/splitting.min.css",
            "handle": "splitting",
            "deps": "",
            "version": "",
            "media": "all"
          }
        ],
        "boldblocks_block_custom_styles": [
          {
            "handle": "splitting",
            "value": "selector .is-animated-heading {\n  visibility: hidden;\n}\n\nselector .is-animated-heading.is-animated {\n  visibility: visible;\n}\n\nselector .is-animated .char {\n  animation               : fadeInUp20 .35s cubic-bezier(0.3, 0, 0.7, 1) both;\n  animation-delay         : calc(50ms * var(--char-index));\n}\n\n@keyframes fadeInUp20 {\n  0% {\n    opacity           : 0;\n    transform         : translateY(20px);\n  }\n\n  100% {\n    opacity           : 1;\n    transform         : translateY(0);\n  }\n}"
          }
        ]
      }
    }
  ]
}