Hi, I do a lot of banners using Inkscape. Wondering whether it is possible to add a text animation like Wipe. As in, one click to a text. I have the CSS code which works, but not sure how to apply it in Inkscape

<p>Text linear wipe </p>

p{
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: linearwipe 6s steps(60, end); 
}

@keyframes linearwipe{ 
  from { width: 0; } 
}  

Thanks.

Source

Maybe this: https://codepen.io/tmrDevelops/pen/yyprGq/

We just need the script within the svg. 🤔

Thanks @TylerDurden

Sadly, I don't know how to add it inside Inkscape. I used Extensions > Stylesheet > Merge Styles into Stylesheet - named the text ID as wipe and tried to add the CSS to it, without success. Any tips on it would be great.

Some tips here, but I would probably need some guidance. 

https://fullcirclemagazine.org/magazines/issue-172/

https://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/

I think it would have to be Javascript based.

Since it's text there's no way of knowing which font the end user browser will use.

In the codepen example, the person has hardcoded the wipe size ( suppose you could just make it larger than needed but may affect surrounding elements) 

Browser based javascript can get the bounding boxes for elements. The the wipe could be sized on the fly :)

Thanks @TylerDurden

@inklinea , thanks

But I do not understand the process much :(

Will it be possible to have it animated inside Canvas itself and export it as a webp?