// ------- Osmo [https://osmo.supply/] ------- // gsap.registerPlugin(DrawSVGPlugin); function initDrawRandomUnderline() { const svgVariants = [ ``, ``, ``, ``, ``, `` ]; // Add attributes to elements function decorateSVG(svgEl) { svgEl.setAttribute('class', 'text-draw__box-svg'); svgEl.setAttribute('preserveAspectRatio', 'none'); svgEl.querySelectorAll('path').forEach(path => { path.setAttribute('stroke', 'currentColor'); }); } let nextIndex = null; document.querySelectorAll('[data-draw-line]').forEach(container => { const box = container.querySelector('[data-draw-line-box]'); if (!box) return; let enterTween = null; let leaveTween = null; container.addEventListener('mouseenter', () => { // Don't restart if still playing if (enterTween && enterTween.isActive()) return; if (leaveTween && leaveTween.isActive()) leaveTween.kill(); // Random Start if (nextIndex === null) { nextIndex = Math.floor(Math.random() * svgVariants.length); } // Animate Draw box.innerHTML = svgVariants[nextIndex]; const svg = box.querySelector('svg'); if (svg) { decorateSVG(svg); const path = svg.querySelector('path'); if (path) { gsap.set(path, { drawSVG: '0%' }); enterTween = gsap.to(path, { duration: 0.5, drawSVG: '100%', ease: 'power2.inOut', onComplete: () => { enterTween = null; } }); } } // Advance for next hover across all items nextIndex = (nextIndex + 1) % svgVariants.length; }); container.addEventListener('mouseleave', () => { const path = box.querySelector('path'); if (!path) return; const playOut = () => { // Don't restart if still drawing out if (leaveTween && leaveTween.isActive()) return; leaveTween = gsap.to(path, { duration: 0.5, drawSVG: '100% 100%', ease: 'power2.inOut', onComplete: () => { leaveTween = null; box.innerHTML = ''; // remove SVG when done } }); }; if (enterTween && enterTween.isActive()) { // Wait until draw-in finishes enterTween.eventCallback('onComplete', playOut); } else { playOut(); } }); }); } // Initialize Draw Random Underline document.addEventListener('DOMContentLoaded', function() { initDrawRandomUnderline(); });