<!-- wp:greenshift-blocks/element {"id":"gsbp-d77c529","textContent":"Hover Over Elements in this area to see effect. Use any text","className":"gravity-text","localId":"gsbp-d77c529","styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dgiga, clamp(3rem, 5vw, 4.5rem))"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dgiga, clamp(4rem, 6vw, 5rem))"],"textAlign":["center"],"fontWeight":["600"]},"isVariation":"divtext","customJs":"    import { animate, hover } from \u0022{{PLUGIN_URL}}/libs/motion/motion.js\u0022\n    import { splitText } from \u0022{{PLUGIN_URL}}/libs/motion/motionplus.js\u0022\n\n    const pointerVelocity = { x: 0, y: 0 }\n    let prevEvent = 0\n\n    function animateText() {\n        const { chars } = splitText(\u0022.gravity-text\u0022)\n\n        document.addEventListener(\u0022pointermove\u0022, (event) =\u003e {\n            const now = performance.now()\n            const timeSinceLastEvent = (now - prevEvent) / 1000 // seconds\n            prevEvent = now\n            pointerVelocity.x = event.movementX / timeSinceLastEvent\n            pointerVelocity.y = event.movementY / timeSinceLastEvent\n        })\n\n        hover(chars, (element) =\u003e {\n            /**\n             * Calculate the speed of the pointer movement\n             * and use that to calculate the distance the character should move\n             */\n            const speed = Math.sqrt(\n                pointerVelocity.x * pointerVelocity.x +\n                    pointerVelocity.y * pointerVelocity.y\n            )\n            const angle = Math.atan2(pointerVelocity.y, pointerVelocity.x)\n            const distance = speed * 0.1\n\n            animate(\n                element,\n                {\n                    x: Math.cos(angle) * distance,\n                    y: Math.sin(angle) * distance,\n                },\n                { type: \u0022spring\u0022, stiffness: 100, damping: 50 }\n            )\n        })\n    }\n\n    document.fonts.ready.then(animateText)","customJsEnabled":true} -->
<div class="gravity-text gsbp-d77c529">Hover Over Elements in this area to see effect. Use any text</div>
<!-- /wp:greenshift-blocks/element -->