Discussion on Responsive SVG Handwritting Text Animation - Wordpress Plugin


Antoine_Rousseau supports this item


60 comments found.

Hi Antoine,

This is pre-sales quesstions,

I read a lot about to convert png,etc to SVG format, will it also convert my other png,jpg to SVG as well? Not that I want it to….

Would it recognize my default font I already using on my site? I want to keep the same font when the animation is running! Or does it use whatever the fonts in this plugin?

Can I set certain word on a short phase with its own color? And also not using gradient but plain color? example: red white blue in plain color

Please advise, thanks


You can use a online tool to convert image to svg format.

You can use your own font. All instructions are in the doc : (convert your font in svg format and copy it to the appropriate folder).

You can use gradient color or succession of plain color. The two mode are available. (First letter red, second letter blue, third letter green, etc is allowed in plain color mode)

Dès que j’insère un shortcode du type [fanim snippet=1], cela bloque revolution slider. De plus le fond transparent ne fonctionne pas non plus. Très déçu de mon achat. http://loca-web.maquette.website/accueil/

When I insert a shortcode like [fanim snippet = 1], it blocks revolution slider. More transparent background is not working either. Very disappointed with my purchase. http://loca-web.maquette.website/accueil/

Bonjour, le conflit entre revolution slider et le plugin peut être résolu. Il s’agit d’un conflit jquery qui en doit pas être chargé deux fois.

Il faudrait supprimer la ligne qui charge jquery dans le script ou bien me transmettre vos codes d’accès je m’en chargerais.

Je regarderais également pour le fond transparent et ferais en sorte qu’il fonctionne.

Restant à votre disposition. Bien cordialement, Antoine Rousseau

Le fond transparent fonctionne. C’est que le code se trouve dans une balise qui elle a un fond qui n'est pas transparent. Ajoutez simplement cette ligne dans une feuille de style :
code { background-color: transparent; }
Ou bien
code { background-color: transparent!important; }

Hello. I just purchased your plugin,

Authors may ask you for a purchase code to verify that you’ve purchased this item.

8fa6dc83-906d-4d60-a6f6-5033adeb3668 - 22 Sep 2016

Where can I find documentation or a tutorial on how to use it? I can produced text with just one or two words, but I was hoping to reduce font size so as to be able to display a page of text with a title and 12 numbered sentences.

How can I resize the dimensions of the canvas on which the words appear? TIA.

Hi, you can use the plugin to write all your text. For that you have to create one shortcode so one animation by line. And when the first animation is done you start the second. I can help you to add timeout delay to animation.

Other solution is to take this plugin instead : https://codecanyon.net/item/advanced-typing-effect-wordpress-plugin-/9917107. In this case you will be refunded.


I am really impressed by your other plugin and very much appreciate your offer to let me exchange the one I bought for the one you just showed me.


There is no need for a refund, unless it cannot be avoided on Envato.com.

Thank you!

Send me a private message by my profile page.

Hello,thanks for this plugin, i have a question about creating a text of multiple lines, i have reduced the height in the backend and i have used the shortcode indicated in the documentation so my shortcode of the line became [fanim snippet=1 height=”40”] , but the minimum height doesn’t change on the output code it still height=”200” , what can i do to minimise the height between lines of the paragraph and set timer to be synchronised in order .Thanks in advance

Hi, Good job to reduce min height. You can also change input range to input text like in the first initial PHP version : http://www.pixel-conception.com/font_anim/index_5.php.

To load sentence asynchronously you have to add some javascript lines. Try to add a parameter in the plugin and a javascript function to define initial time before loading animation.

Hi,okay i will try it.thanks

More easy : you can add some conditional line with PHP “when text is” or “when this parameter is” and in add javascript timeout function depend of the text.


guiyus Purchased

Bonjour je viens d’acheter le plugin mais ça ne marche pas j’ai essayé de mettre le shortcode comme écrit sur la documentation rien n’y fait…..

Envoyez moi un message privé via ma page profil. Je vous l’enverrais de suite.


Vous pourrez concevoir l’animation de manière complètement indépendante puis l’insérer avec une iframe.

Si vous gérez suffisamment bien le css et le responsive vous pourrez même rendre le tout responsive. La version php brute l’est.

Merci pour votre achat.

Pour la faire fonctionner : créez votre animation via la page incluse dans le plugin (similaire à la page de démo), cliquez sur “get the code” et faites un copié collé du code qui s’affiche dans un fichier vide. C’est très simple par contre vous ne pouvez pas sauvegarder votre animation comme avec la version wordpress.

Si possible transmettez moi l’adresse où se trouve l’animation finale, je serais curieux de voir les usages que l’on fait de l’outil..


guiyus Purchased

Bine reçu, je viens de vous envoyer un message, j’attends donc votre réponse.

Mille mercis pour votre réactivité.

Hi! I just bought your plugin. It seems to be working fine, but revolution slider and other parallax areas of my theme doesn’t. I know it may be a jquery conflict, but how can I fix it? Thanks in advance!

Hi, You have some javascript error.

Can you give me url of the same page without my plugin animation ?

Or your credentials login ?

Hi Antoine,

I’m going to give you my credentials login in a private message.



JFritz Purchased

Hello, I just installed the plugin and had this issue:

Notice: Undefined variable: page in /www/htdocs/xxxxxx/xxxxx/wp-content/plugins/font-animation/font_animation.php on line 44

Warning: session_start(): Cannot send session cache limiter – headers already sent (output started at /www/htdocs/xxxxx/xxxxxx/wp-content/plugins/font-animation/font_animation.php:44) in /www/htdocs/xxxx/xxxxx/wp-content/themes/cleanspace/functions.php on line 805

Hi. 2 solutions for that:

1 . add this line in your wp-config.php file :
2 . add the same line in font-animation.php (line 15):

I retain for next upgrade.


JFritz Purchased

Hi, thanx, seems to function. Shall I erase this 2 lines after the next upgrade?

Hi there,

I wanted to upload my own font as it says but I cant figure out how to do it?

Thanks for your help!

Hi, first convert your font in svg with an online tool (search “ttf to svg” with google search engine)

Then copy svg file in font folder :


Hi! I designed my plugin and installed the shortcode in the text editor but I only get a blank area where the animation should be. I am using Beaver Builder Theme and Plugins. Is there a conflict? Maybe I’m doing something wrong?

Hi, Try to deactivate temporarly all other plugins.

I did. It’s not working. Actually it created a large white screen at the top of my homepage, where I had inserted the shortcode, that I couldn’t access via the BB page builder. So I have deleted the app. Maybe it’s the page builder that’s presenting the conflict? Is it possible to get a refund?

Hi, Can you give me your credential login ? I study that and come back to you.

Hello. I’m receiving the following errors when I load a page with the shortcode (http://beeventsdesign.com/2016/font-example/)

Warning: XMLReader::open(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /data/15/1/91/93/1417582/user/1522226/htdocs/2016/wp-content/plugins/font-animation/font_anim.php on line 129

Warning: XMLReader::open(http://beeventsdesign.com/2016/wp-content/plugins/font-animation//font/Graffogie.svg): failed to open stream: no suitable wrapper could be found in /data/15/1/91/93/1417582/user/1522226/htdocs/2016/wp-content/plugins/font-animation/font_anim.php on line 129

Warning: XMLReader::open(): Unable to open source data in /data/15/1/91/93/1417582/user/1522226/htdocs/2016/wp-content/plugins/font-animation/font_anim.php on line 129

Warning: XMLReader::read(): Load Data before trying to read in /data/15/1/91/93/1417582/user/1522226/htdocs/2016/wp-content/plugins/font-animation/font_anim.php on line 131

Warning: Division by zero in /data/15/1/91/93/1417582/user/1522226/htdocs/2016/wp-content/plugins/font-animation/font_anim.php on line 216

Put this line in an htaccess file in the directory you want the setting to be enabled:

php_value allow_url_fopen On

Bonjour Antoine, deux questions: 1/ dans la demo dans l’onglet “On scroll” il y a une anim sur les icones Twitter etc, est-ce via le même plugin? 2/ est-ce que le conflit revolution slider / parallax a été résolu dans une update récente? Merci!

C’est le même plugin. Il offre la possibilité d’afficher au scroll. La démo utilise une police qui propose des caractères de ce type (twitter etc) Les conflits ont été résolus, il suffit éventuellement de retirer une ligne : celle qui charge le fichier jquery déjà chargé par revolution slider.


manojsv Purchased

Hello, My purchase code is: 51564b15-5416-4fca-9fab-b4fc5d68b7e7.

How can I set animation delay of 10s for this plugin on page load?

Please help. Thank you, Manoj

Add a timeout function on this fle : “font-anim.php”.

More help here : http://www.w3schools.com/jsref/met_win_settimeout.asp

Pre-sales question: Is there any way to add the animation to the menu text?

Hi. Yes. - by using shortcode in files theme directly . mnimum of devlopment knowledge are required.

Thanks, I’ll let my client know and we’ll take it from there.

Need to be able to make a text animation like this http://www.marieforleo.com/about/ (The text “Hey!”). can this plugin generate such animation with different fonts ?

Hi, this “Hey” is generated by SVG. My plugin do exactly the same thig except only with SVG font and not directly SVG code. If you take some time you can create your svg font with an online tool for free (https://icomoon.io/app/) and create a letter exactly like the “Hey” or with another SVG code. After you use this svg font that you have created and just type the appropriate letter in the text field. The svg code that you have inserted in the font (“hey” or other svg) is played as animation.

I apologize, I already sent a message about how to handle alignment, but I’m finding that the animation is loading before the section of the page is visible. If I reload the page on the section with the animation it loads, but if I reload the page from the top and scroll down the animation is already loaded prior to getting there. Is there a way to load the animation when it’s visible?

You can choose in options between : on load, on scroll or on hover. You can choose on scroll. Or you can choose on hover and modify the element in file to an other element to be hover (the section background) (devlopment knowledge required) Or you can modify the function in file to start the animation when the scroll is an precise point (devlopment knowledge required)

I tried the different options. On scroll is a parallax effect, which isn’t what we’re going for and on hover doesn’t solve it. It sounds like starting that animation at a precise point is best, but can I justify this per animation? I have two of them, so I’d need to set a point for each animation. Is that possible?

Yes. The difficulty is to create a working function that load animation when it is visible. (http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073)

But I can send you a file (that replace “hover loading” file) that load animation when the scroll is greater than a value of pixels.

And you can define manually the value.

Contact me at private message if you are interested.

The problem is that in the responsive version the value is not the same…


Can this plugin work with Divi Theme and can I use it to animate a small written article section and not just the Title? Thanks

It work for divi theme. It doesn’t work for paragraph with line return.

Bonjour, Pourquoi lorsque j’intègre le code j’ai ça : http://mestests.fr/minimalist3/

J’utilise le thème Jupiter qui lui même utilise VLC. J’ai édité le code avec le text bloc.

Merci de votre aide

Peut-être un clonflit jquery. Essayez de retirer la ligne chargeant jquery dans le fichier “font_anim.php” et retestez.

Pouvez vous me préciser quelle ligne de code je cherche?

La ligne 253 dans “font_anim.php” :

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

datavamp Purchased

This plugin isn’t working for me at all. Size and width of Canvas do nothing. Letters are huge and being animated on top of each other. There is no letter spacing. The preview works, but when you paste the shortcode into the page, it looks nothing like the preview.

Hi, Can you try with basic theme (twentyten or other) ?


datavamp Purchased

Yeah, unfortunately that will do me no good. I need to use this with the Flora theme, not the default Wordpress theme.

It’s just to test. To identify problem and resolve it.


datavamp Purchased

Fixed the problem. There was a transform CSS set for all objects on the page of Flora Theme. Removed this for the SVG Div and it shows up fine now. Thank you for the quick and courteous response!


fredib Purchased

Hi Antoine, on a default theme with WordPress, cannot make it work. Can you help?

you can see an empty box and the background color but no letters animated..they work in the preview inside wordpress

Hi Antoine, seems to work…by enabling PHP error logging. merci :)

Nothing. Thanks for your purchase