Bricks Builder Splitting JS

template.json

{"content":[{"id":"nzmpxb","name":"code","parent":0,"children":[],"settings":{"code":"<link rel=\"stylesheet\" href=\"https://unpkg.com/splitting/dist/splitting.css\" />\n<link rel=\"stylesheet\" href=\"https://unpkg.com/splitting/dist/splitting-cells.css\" />\n<script src=\"https://unpkg.com/splitting/dist/splitting.min.js\"></script>\n\n<script type=\"module\">\n  Splitting(); \n</script>","executeCode":true,"noRoot":true,"signature":"388e5749bc3a3f681d4be4dc49285866","user_id":1,"time":1720330112}},{"id":"yqnnjo","name":"section","parent":0,"children":["vtzawa"],"settings":{}},{"id":"vtzawa","name":"container","parent":"yqnnjo","children":["pudafr"],"settings":{"_alignItems":"center"}},{"id":"pudafr","name":"text-basic","parent":"vtzawa","children":[],"settings":{"text":"Select any part of","tag":"p","_cssGlobalClasses":["kekkpn"],"_attributes":[{"id":"wcvkrk","name":"data-splitting"}]},"label":"Split Text"}],"source":"bricksCopiedElements","sourceUrl":"https://acss-at-based.local","version":"1.9.9","globalClasses":[{"id":"kekkpn","name":"split-text","settings":{"_typography":{"font-size":"8rem","text-transform":"uppercase","font-weight":"900"},"_cssCustom":".split-text {\n\t--transition1: all 0.4s ease;\n  --transition2: all 0.6s ease-out;\n  \n  --char-before-color: var(--primary-trans-40);\n  --char-before-transform: none;\n  --char-before-transform-hover: translateY(-10px) translatex(-10px);\n  \n  --char-after-color: var(--secondary-trans-40);\n  --char-after-transform: none;\n  --char-after-transform-hover: translateY(10px) translatex(10px);\n  \n  --char-transform: none;\n  --char-transform-hover: scale(1.4) rotateY(45deg) rotatex(30deg);\n  \n}\n\n.split-text {\n\tisolation: isolate;\n}\n\n.split-text .word{\n  perspective: 100px;\n}\n\n.split-text .char{\n  transition: var(--transition2);\n  transform: var(--char-transform);\n}\n\n.split-text.splitting .char::before, .split-text.splitting .char::after{\n  z-index: -1;\n  transition: var(--transition1);\n  visibility: visible;\n}\n\n.split-text.splitting .char::before{\n  color: var(--char-before-color);\n  transform: var(--char-before-transform);\n}\n\n.split-text.splitting .char::after{\n  color: var(--char-after-color);\n  transform: var(--char-after-transform);\n}\n\n.split-text .word:hover {\n\t--char-before-transform: var(--char-before-transform-hover);\n  \n  --char-after-transform: var(--char-after-transform-hover);\n  \n}\n\n.split-text .char:hover{\n  --char-transform: var(--char-transform-hover);\n}"}}],"globalElements":[]}