search

juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.45k stars 3.69k forks source link

Text stroke #727

Closed skoll1 closed 4 years ago

skoll1 commented 4 years ago

svg width="100%" height="100" text text-anchor="middle" x="50%" y="50%" class="text" somthing to write text svg

.text{ font-size: 64px; font-weight: bold; text-transform: uppercase; fill: none; stroke: #3498db; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; } @keyframes stroke { 100% { stroke-dashoffset: -400; } } anime({ targets: '.text', strokeDashoffset: [anime.setDashoffset, 0], easing: 'easeInOutSine', duration: 1500, delay: function(el, i) { return i * 250 }, direction: 'alternate', loop: true }); This can easily achieve text strokes，But I did not implement it in this way. Is this a bug? Will this writing be supported in the future? It will be very troublesome if every text requires an svg path

juliangarnier commented 4 years ago

Text in itself is not animatable, only numerical values are. Animating strokeDashoffset required a path target, since you're actually animating the strokeDashoffset property. You can transform your letters to path, but that means only animating the contour of the letters.