Text Along Path New
A line of text that keeps sliding along a curved SVG path, faster on hover. As a ribbon above a hero or between sections.
Interieurbouw Vos · sinds 2004
How to use it
- Paste the HTML where the text animations should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Text Along Path · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="tap"><svg class="tap__svg" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" aria-label="Van ontwerp tot oplevering, in heel Zuid-Holland">
<path id="tap-p" class="tap__path" d="M-20,190 C70,40 150,40 205,125 S330,215 420,70"/>
<text class="tap__t"><textPath href="#tap-p" startOffset="0">Van ontwerp tot oplevering · in heel Zuid-Holland · Van ontwerp tot oplevering · in heel Zuid-Holland · Van ontwerp tot oplevering · in heel Zuid-Holland · Van ontwerp tot oplevering · in heel Zuid-Holland · </textPath></text>
</svg><span class="tap__dot"></span><span class="tap__lab">Interieurbouw Vos · sinds 2004</span></div>
</div>/* Text Along Path · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.tap{position:absolute;inset:0;background:#fff;overflow:hidden}
.tap__svg{position:absolute;inset:0;width:100%;height:100%}
.tap__path{fill:none;stroke:rgba(10,10,10,.12);stroke-width:1;stroke-dasharray:3 5}
.tap__t{font:700 15px 'Switzer',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;fill:#0a0a0a}
.tap__dot{position:absolute;right:14px;top:14px;width:10px;height:10px;border-radius:50%;background:#F5480F}
.tap__lab{position:absolute;left:14px;top:12px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.55)}// Text Along Path · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.tap')||root;var tp=root.querySelector('textPath'),tx=root.querySelector('.tap__t');if(matchMedia('(prefers-reduced-motion: reduce)').matches){tp.setAttribute('startOffset','10');return;}
var per=0,off=0,sp=40,tsp=40,last=0,vis=true;root.addEventListener('mouseenter',function(){tsp=120;});root.addEventListener('mouseleave',function(){tsp=40;});
if('IntersectionObserver' in window)new IntersectionObserver(function(es){vis=es[0].isIntersecting;}).observe(root);
(function loop(t){var dt=last?Math.min(.05,(t-last)/1000):0;last=t;if(vis){if(!per){try{per=tx.getComputedTextLength()/4;}catch(e){}}sp+=(tsp-sp)*.06;off-=sp*dt;if(per&&off<-per)off+=per;tp.setAttribute('startOffset',off.toFixed(1));}requestAnimationFrame(loop);})(performance.now());
}
init(document.querySelector('.jouw-container'));More text animations
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →