Text path animates too fast

Please define your problem or issue as clear as possible.

For a problem, please fill the following:

Vivus version: Latest Browser: Tested on chrome, firefox and edge (latest)

Hi, I have a logo with some text in it, I have used inkscape to turn the text element into path and so everything was animating but the text was waaay too fast animated… so I used the animation type - scenario and giving it data-duration of about 1000 frames with animation timing EASE gave the right effect…

the only problem is after the animation is finished there is something going on in the background and it takes about 20 seconds until my finished callback function is called (the function is used to fade in the fill colors of the logo)… well that delay kind of ruins it…

how I tried to solve it: I measured the time it takes to visually end the animation with a stopwatch… created a function with that timeout that transitions the fill colors… well it’s not an elegant solution as you can see…

I looked around other issues and didn’t find an exact explanation of the problem or solution so my question is how do you make the text animate slower?

here is an example of a path that I use that represents a text:

<g transform="matrix(1.2037507,0,0,1.2037507,55.288375,435.01239)" id="g88" style="fill:#ffffff;stroke:#ffffff;stroke-width:0.5740391;stroke-miterlimit:4">
<!-- web developer -->
  <path data-start="180" data-duration="1100" d="m 0.19531,13.867375 h 3.2031 v 1.6797 H 2.92966 l 1.7676,6.4551 2.4219,-8.1348 h 1.5234 l 2.3145,8.1152 1.8457,-6.4355 h -0.58594 v -1.6797 h 3.2031 v 1.6797 h -0.86914 l -2.7734,8.5938 h -1.6797 l -2.2949,-8.0762 -2.2852,8.0762 h -1.6992 l -2.7539,-8.5938 H 0.19534 v -1.6797 z m 30.527334,5.2928 q 0,0.429687 0.06348,0.786133 0.06348,0.356445 0.18066,0.67871 0.361328,0.976562 1.157227,1.469726 0.795898,0.493164 1.8018,0.49316 0.791016,0 1.538086,-0.219726 0.74707,-0.219727 1.5674,-0.68848 l 0.73242,1.2402 q -0.996094,0.683594 -2.001953,1.015625 -1.00586,0.332031 -2.0898,0.33203 -1.025391,0 -1.899414,-0.341797 -0.874024,-0.341797 -1.5039,-1.0156 -0.629877,-0.673803 -0.98633,-1.6797 -0.356454,-1.005897 -0.35645,-2.3438 0,-1.083984 0.302734,-2.045898 0.302734,-0.961915 0.90332,-1.6797 0.600586,-0.717786 1.4893,-1.1377 0.888714,-0.419915 2.0703,-0.41992 1.142578,0 1.90918,0.346679 0.766601,0.34668 1.25,0.91797 0.483398,0.571291 0.73242,1.3037 0.249021,0.73241 0.34668,1.4941 0.04883,0.371094 0.06348,0.751953 0.01465,0.38086 0.01465,0.74219 h -7.2852 z m 2.8418,-4.0332 q -0.634766,0 -1.108399,0.180664 -0.473633,0.180664 -0.80566,0.51758 -0.332027,0.336916 -0.53223,0.8252 -0.200203,0.488284 -0.29785,1.0938 h 5.2441 q -0.03906,-0.566406 -0.180664,-1.044922 -0.141601,-0.478515 -0.43457,-0.83008 -0.292968,-0.351564 -0.75195,-0.54688 -0.458981,-0.195315 -1.1328,-0.19531 z m 18.505868,-6.3376 h 3.2813 v 5.918 q 0.644531,-0.498047 1.40625,-0.791016 0.761719,-0.292968 1.5723,-0.29297 0.996094,0 1.826172,0.371094 0.830078,0.371094 1.4307,1.0449 0.600622,0.673806 0.93262,1.6162 0.331998,0.942394 0.33203,2.085 0,1.220703 -0.371094,2.211914 -0.371094,0.991211 -1.0303,1.7041 -0.659206,0.712889 -1.5674,1.0986 -0.908194,0.385711 -1.9922,0.38574 -0.751953,0 -1.411133,-0.219726 -0.65918,-0.219727 -1.1279,-0.57129 v 0.63477 h -1.8164 v -13.516 h -1.4648 V 8.7889906 Z m 5.78126,6.4352 q -0.712891,0 -1.367188,0.292969 -0.654297,0.292969 -1.1328,0.79102 v 5.4395 q 0.3125,0.322265 0.917969,0.571289 0.605469,0.249023 1.5234,0.24902 0.625,0 1.201172,-0.234375 0.576172,-0.234375 1.0156,-0.70801 0.439428,-0.473635 0.70313,-1.1768 0.263702,-0.703165 0.26367,-1.6406 0,-0.859375 -0.249023,-1.523438 -0.249024,-0.664062 -0.67383,-1.123 -0.424807,-0.458937 -0.99121,-0.69824 -0.566404,-0.239302 -1.2109,-0.23926 z m 17.910147,8.7598 z m 23.330118,-15.195 h 3.193403 v 13.516 h 1.4844 v 1.6797 h -3.3008 v -0.83008 q -0.488284,0.498047 -1.132815,0.776367 -0.644531,0.27832 -1.4648,0.27832 -1.025391,0 -1.90918,-0.356445 -0.883789,-0.356445 -1.5332,-1.0449 -0.649411,-0.688455 -1.0156,-1.6895 -0.366189,-1.001045 -0.36621,-2.29 0,-1.171875 0.351563,-2.133789 0.351562,-0.961914 0.99609,-1.6406 0.644527,-0.678686 1.5527,-1.0547 0.908172,-0.376014 2.0215,-0.37598 0.732422,0 1.33789,0.161133 0.605469,0.161132 1.162102,0.56152 v -3.877 H 99.091878 V 8.7897206 Z m -0.9864,13.8376 q 0.810547,0 1.357422,-0.239258 0.546871,-0.239258 1.005901,-0.71777 v -5.6641 q -0.488282,-0.410156 -1.123048,-0.595703 -0.634765,-0.185547 -1.2988,-0.18555 -0.644531,0 -1.210937,0.239258 -0.566406,0.239258 -0.99121,0.69824 -0.424804,0.458982 -0.66895,1.123 -0.244146,0.664018 -0.24414,1.5234 0,0.9375 0.234375,1.65039 0.234375,0.712891 0.6543,1.1963 0.419925,0.48341 1.0059,0.72754 0.585975,0.244131 1.2793,0.244141 z m 21.132833,-3.4668 q 0,0.429687 0.0635,0.786133 0.0635,0.356445 0.18066,0.67871 0.36132,0.976562 1.15722,1.469726 0.7959,0.493164 1.8018,0.49316 0.79102,0 1.53809,-0.219726 0.74707,-0.219727 1.5674,-0.68848 l 0.73242,1.2402 q -0.9961,0.683594 -2.00196,1.015625 -1.00585,0.332031 -2.0898,0.33203 -1.02539,0 -1.89941,-0.341797 -0.87402,-0.341797 -1.5039,-1.0156 -0.62988,-0.673803 -0.98633,-1.6797 -0.35645,-1.005897 -0.35645,-2.3438 0,-1.083984 0.30274,-2.045898 0.30273,-0.961915 0.90332,-1.6797 0.60058,-0.717786 1.4893,-1.1377 0.88871,-0.419915 2.0703,-0.41992 1.14257,0 1.90917,0.346679 0.76661,0.34668 1.25,0.91797 0.4834,0.571291 0.73242,1.3037 0.24903,0.73241 0.34668,1.4941 0.0488,0.371094 0.0635,0.751953 0.0147,0.38086 0.0147,0.74219 h -7.2852 z m 2.8418,-4.0332 q -0.63477,0 -1.1084,0.180664 -0.47363,0.180664 -0.80566,0.51758 -0.33203,0.336916 -0.53223,0.8252 -0.2002,0.488284 -0.29785,1.0938 h 5.2441 q -0.0391,-0.566406 -0.18066,-1.044922 -0.14161,-0.478515 -0.43457,-0.83008 -0.29297,-0.351564 -0.75195,-0.54688 -0.45899,-0.195315 -1.1328,-0.19531 z m 18.14454,-1.2596 h 3.4961 v 1.6797 h -0.94727 l 2.5,6.9727 2.4414,-6.9727 h -0.61523 v -1.6797 h 3.2031 v 1.6797 h -0.86914 l -3.3105,8.5938 h -1.7969 l -3.3008,-8.5938 h -0.80078 v -1.6797 z m 23.45703,-5.078 h 3.2813 v 13.516 h 1.5234 v 1.6797 h -4.8047 v -1.6797 h 1.4648 v -11.836 h -1.4648 v -1.6797 z m 20.31249,10.3708 q 0,0.429687 0.0635,0.786133 0.0635,0.356445 0.18066,0.67871 0.36133,0.976562 1.15723,1.469726 0.7959,0.493164 1.8018,0.49316 0.79102,0 1.53809,-0.219726 0.74707,-0.219727 1.5674,-0.68848 l 0.73242,1.2402 q -0.9961,0.683594 -2.00196,1.015625 -1.00586,0.332031 -2.0898,0.33203 -1.02539,0 -1.89941,-0.341797 -0.87402,-0.341797 -1.5039,-1.0156 -0.62988,-0.673803 -0.98633,-1.6797 -0.35645,-1.005897 -0.35645,-2.3438 0,-1.083984 0.30273,-2.045898 0.30274,-0.961915 0.90332,-1.6797 0.60059,-0.717786 1.4893,-1.1377 0.88872,-0.419915 2.0703,-0.41992 1.14258,0 1.90918,0.346679 0.76661,0.34668 1.25,0.91797 0.4834,0.571291 0.73242,1.3037 0.24903,0.73241 0.34668,1.4941 0.0488,0.371094 0.0635,0.751953 0.0147,0.38086 0.0147,0.74219 h -7.2852 z m 2.8418,-4.0332 q -0.63477,0 -1.1084,0.180664 -0.47363,0.180664 -0.80566,0.51758 -0.33203,0.336916 -0.53223,0.8252 -0.2002,0.488284 -0.29785,1.0938 h 5.2441 q -0.0391,-0.566406 -0.18066,-1.044922 -0.14161,-0.478515 -0.43457,-0.83008 -0.29297,-0.351564 -0.75195,-0.54688 -0.45899,-0.195315 -1.1328,-0.19531 z m 18.84767,-6.3376 h 3.2813 v 13.516 h 1.5234 v 1.6797 h -4.8047 v -1.6797 h 1.4648 v -11.836 h -1.4648 v -1.6797 z m 18.45702,10.1364 q 0.01,-1.201172 0.38574,-2.1875 0.37598,-0.986328 1.0498,-1.6943 0.67383,-0.707972 1.6016,-1.0889 0.92778,-0.380928 2.041,-0.38086 1.12305,0 2.05567,0.380859 0.93261,0.38086 1.5967,1.0791 0.66408,0.698241 1.0352,1.6846 0.37111,0.98636 0.37109,2.1875 0,1.181641 -0.3711,2.172852 -0.37109,0.991211 -1.0352,1.7041 -0.6641,0.712889 -1.5967,1.1084 -0.93259,0.395511 -2.0557,0.39551 -1.14257,0 -2.07031,-0.390625 -0.92773,-0.390625 -1.5918,-1.0986 -0.66406,-0.707975 -1.0352,-1.6943 -0.37113,-0.986325 -0.38086,-2.1777 z m 1.92386,0 q 0,0.869141 0.24902,1.572266 0.24903,0.703125 0.68359,1.1963 0.43457,0.493175 1.0059,0.76172 0.57134,0.268545 1.2158,0.26855 0.67383,0 1.25489,-0.263672 0.58105,-0.263672 1.0107,-0.75684 0.42964,-0.493168 0.67383,-1.1963 0.24418,-0.703132 0.24414,-1.582 0,-0.917969 -0.24414,-1.63086 -0.24414,-0.71289 -0.66895,-1.1914 -0.42481,-0.478509 -1.0107,-0.72266 -0.58589,-0.24415 -1.2598,-0.24414 -0.64453,0 -1.21582,0.244141 -0.57129,0.244141 -1.0059,0.72266 -0.43461,0.478519 -0.68359,1.1914 -0.24898,0.712881 -0.24902,1.6309 z m 21.78708,-5.0584 h 3.2227 v 0.83984 q 0.64453,-0.498047 1.40625,-0.791016 0.76172,-0.292968 1.5723,-0.29297 0.99609,0 1.82617,0.371094 0.83008,0.371094 1.4307,1.0449 0.60062,0.673806 0.93262,1.6162 0.332,0.942394 0.33203,2.085 0,1.220703 -0.37109,2.226563 -0.3711,1.005859 -1.0303,1.7236 -0.65921,0.71774 -1.5674,1.1182 -0.9082,0.400459 -1.9922,0.40039 -0.77149,0 -1.37207,-0.161133 -0.60059,-0.161133 -1.1475,-0.41504 v 3.2715 h 1.582 v 1.6797 h -4.8047 v -1.6797 h 1.3867 v -11.357 h -1.4063 v -1.6797 z m 5.72263,1.3572 q -0.70312,0 -1.35254,0.283203 -0.64941,0.283203 -1.1279,0.78125 v 5.4785 q 0.32227,0.332031 0.92285,0.595703 0.60059,0.263672 1.499,0.26367 0.625,0 1.20117,-0.24414 0.57618,-0.244141 1.0156,-0.72754 0.43943,-0.4834 0.70313,-1.1963 0.26371,-0.712901 0.26367,-1.6504 0,-0.859375 -0.24902,-1.523438 -0.24902,-0.664062 -0.67383,-1.123 -0.42481,-0.458937 -0.99121,-0.69824 -0.5664,-0.239302 -1.2109,-0.23926 z m 20.60548,3.9356 q 0,0.429687 0.0635,0.786133 0.0635,0.356445 0.18066,0.67871 0.36133,0.976562 1.15723,1.469726 0.7959,0.493164 1.8018,0.49316 0.79101,0 1.53808,-0.219726 0.74707,-0.219727 1.5674,-0.68848 l 0.73242,1.2402 q -0.99609,0.683594 -2.00195,1.015625 -1.00586,0.332031 -2.0898,0.33203 -1.02539,0 -1.89941,-0.341797 -0.87403,-0.341797 -1.5039,-1.0156 -0.62988,-0.673803 -0.98633,-1.6797 -0.35646,-1.005897 -0.35645,-2.3438 0,-1.083984 0.30273,-2.045898 0.30274,-0.961915 0.90332,-1.6797 0.60059,-0.717786 1.4893,-1.1377 0.88872,-0.419915 2.0703,-0.41992 1.14258,0 1.90918,0.346679 0.7666,0.34668 1.25,0.91797 0.4834,0.571291 0.73242,1.3037 0.24902,0.73241 0.34668,1.4941 0.0488,0.371094 0.0635,0.751953 0.0147,0.38086 0.0147,0.74219 h -7.2852 z m 2.8418,-4.0332 q -0.63476,0 -1.10839,0.180664 -0.47364,0.180664 -0.80566,0.51758 -0.33203,0.336916 -0.53223,0.8252 -0.20021,0.488284 -0.29785,1.0938 h 5.2441 q -0.0391,-0.566406 -0.18067,-1.044922 -0.1416,-0.478515 -0.43457,-0.83008 -0.29297,-0.351564 -0.75195,-0.54688 -0.45898,-0.195315 -1.1328,-0.19531 z m 26.20123,0.8789 h -1.8555 v -0.625 q -0.32226,0 -0.65918,0.12207 -0.33691,0.122071 -0.62988,0.37109 -0.29296,0.24902 -0.5127,0.63477 -0.21973,0.385751 -0.31738,0.91309 v 4.8828 h 1.7188 v 1.6797 h -5.0195 v -1.6797 h 1.3965 l 0.01,-6.7578 h -1.4063 v -1.6797 h 3.2324 v 1.3965 q 0.17578,-0.3125 0.39551,-0.581054 0.21972,-0.268555 0.48828,-0.46875 0.26855,-0.200196 0.5957,-0.3125 0.32714,-0.112305 0.70801,-0.1123 h 0.95703 q 0,0 0.89844,0.01953 v 2.1973 z"
    id="path86" style="fill:#ffffff;stroke:#ffffff;stroke-width:0.5740391;stroke-miterlimit:4" inkscape:connector-curvature="0"
  />
</g>

thanks in advance

[maxwellito]

Ok I tried Inkscape:

1. Create your document
2. Write your text
3. Select your text element
4. Object > Object to Path
5. Object > Fill and Stroke (to select your color and remove the fill if you want to)
6. Save as > pick ‘Optimised SVG’ as format

• Set the ‘Number to significant digit’ to 3
• Tab SVG output: Tick ‘Remove metadata’ and ‘Remove Comment’

Ready to use for Vivus

Here is what I’ve done: https://jsfiddle.net/9swg0cw5/

PS: The X11 plus the weird interface made go mad a bit… but happily surprised of the result 😄

[maxwellito]

😃

My SVG editor is Adobe Illustrator. I grew up with it, it’s like my third hand but I don’t want to recommend it because it’s a bit expensive for a casual use.

I should really give another try to Inkscape. Because it’s open source and Im pretty aure it got the power to export SVG the way I want. Plus if it works I will be able to provide mini tutos to build SVG with an open source and free solution: win-win!

The problem with inkscape is the SVG format contain all the data to be manipulated. Unlike Illustrator that use .ai files for project then you can export as .svg with pretty advanced options.

Ill install inkscape today to see how to turn text to path. If that works, the output can always be put in SVGOMG to make it clean.

I keep you posted 😉