164 comments found.
Pre-sales questions!: 1. Is there a working example of the morph? I need to get some text morphing to a butterfly. 2. Can animations be activated on scroll? The sample editor thingy doesn’t seem to result any code.
Hello,
1) Text itself cannot be animated as morph. First you need to convert your text into path(s) inside your vector software (Adove Illustrator for ex.). In general, I strongly recommend to try to create your animations online on my demo site (http://enlivenem.com/animator/animator.html) and get familiar with the documentation for WordPress version of my script (http://enlivenem.com/documentation-wp/index.html) before purchasing.
2) Exactly on scroll. When your SVG becomes visible in a user’s browser viewport (while scrolling), its animation starts. Also you can allow an animation to be repeated when a user clicks or taps your graphic.
Thanks for the reply: I tried the demo-animator but just get this message in results – THIS IS A LIMITED DEMO VERSION. GETTING OF READY CODE IS DISABLED. PLEASE USE YOUR COPY OF THE EDITOR AFTER PURCHASING. Also for 2. Can you set an animation to trigger when user has scrolled a certain pixel height, % or when animation is in center of viewport?
ah sorry – looking thru the docs now – looks good but it be nice to check out the demo…?
I can not give other examples, other than those that are on the demo site.
My svg images are only loading a portion of the background. They are set to full width and height but none of them are working properly.
Replied to your email. You made a mistake in CSS syntax.
hey,
i got bug on your plugin, i cant load images in media http://prntscr.com/8tyw4cplease check and let me know soon
Thank you
Hello,
It’s not a bug, it’s a conflict with some third party plugin (security one maybe).
In any case you can try the following:
1) Navigate to Plugins > Installed Plugins, find “Enliven’em!” and click Edit.
2) In the opened “enlivenem-for-wp/enlivenem-for-wp.php” file please findadd_filter('wp_prepare_attachment_for_js', 'enlivenem_prepare_attachment_for_js_filter', 10, 3);
and add 2 slashes ”//” at the beginning of that line, like this:
//add_filter('wp_prepare_attachment_for_js', 'enlivenem_prepare_attachment_for_js_filter', 10, 3);
This will disable thumbnails of SVG files and you will see just their names in your Media Lib.
If you can’t do that by yourself, please email me from the support tab above with temporary login details into your WP dashboard, so I can do that by myself.
And by the way I provide my support by email, not in comments.
it is working, Thank you @DeeThemes 
You are welcome!
Hi! 
I’ve sent you an email.
Answered.
Hi!
I’ve sent you an email, please reply!
Hi, Greetings Dee. It would be great and awesome if you create a video tutorial how you got an Adobe illustrate illustration to work from saving as SVG, to Optimizing that SVG to Using/copying that optimized SVG code into your animation engine and getting it work. Use one of your demo icons illustration to explain.
Thanks for the suggestion. I’ll think about it.
Actually that’s must or else, our minds are thinking it’s so complicate to make our illustrations work as yours, that’s when we purchase your product but don’t use it after purchasing it. We are just purchasing it but not using it.
http://www.youtube.com/watch?v=AoqL0hMdPPA
Many of your questions are described there.
Thanks for the Video tutorial that has covered the most except optimization part! 1. Please provide us the optimization part.
I have concern about the technologies that are making the animation to animate.
For example what If I just want to paste this animated SVG, into plan HTML as you did in your video tutorial? I want to load the animated SVG out of wordpress in a plan HTML website not in wordpress site. How do I achieve it. In your video tutorial your animated SVG worked from your local harddrive itself but you are asking us to load the animated SVGs on live server, why? Why doesn’t it work for us on our local harddrive itself without internet like yours in your video tut.
Because you have a WP version of my script. In that case you can use a media lib to upload your SVG files and use them as “src” for your IMG tag with class “enlivenem”. If you use IMG tag you need a working webserver to AJAX works.
But nothing prevents you to use your SVG code inside HTML. In that case you don’t need a working webserver for animation works. You can also get familiar with documentation for jQuery version of my script for more details: http://enlivenem.com/documentation/index.html?v=1.4
But please be sure that you will not break license agreement if you want to use the purchased version outside a WordPress.
Hi!
I’m fully grasped with Envato License agreements . I value Authors and their efforts. I’ll be only using on one site at a time. If I use on wordpress site I’ll not use it in HTML site, If I use it in HTML site I’ll not use in wordpress site. I’ll always use only in one site a time but not more than one site at any given point of time.
2. So do you mean Jquery version of your script doesn’t require a working webserver? What do you mean my working webserver here, does it mean live webserver that’s connected to internet or can it be just a locally installed webserver that’s not connected internet, like xampp setup?
Hello,
1) Under the working web server I mean any server: LAMP, XAMPP, a server from your hosting provider, etc. Anyone.
2) As I said earlier you need a web server if you use your SVG in “src” attribute of IMG tag, because AJAX requests don’t work from HDD. My script converts your SVG code from that IMG tag into in-line form and injects its into your HTML. After that my script can work with that SVG code directly.
3) If you paste your SVG code into your HTML page directly, as I describe in the documentation of jQuery version, you don’t need a web server. In that case there is no any AJAX request and animations will work from your HDD when your open your HTML file in a browser.
In general, WordPress will not work from HDD without local or internet web server. Also often there might be problems with pasting SVG code in TinyMCE editor. So that’s why I recommend to use Enliven’Em illustrations as images with class “enlivenem”. One exception is if you use some plugins, like Visual composer for ex., when you can insert clear HTML / XML / SVG code blocks into your pages/posts.
Also I’d like to say that I provide a support by email. So if you have any other questions please write me a message from the Support tab above on this page.
It’s clear now, Thank you very much!
Optimization Questions:
1.) Ungrouping the layers required or does it work even being under group?
Can we have certain layers under a group or should I sanitize my SVG by ungrouping (getting the layers off the group). I’m in need of having some layers under a group so that I can animate that bunch at once using your animator.
Of course not, ungrouping is not required. It’s up to you to decide when to use or don’t use groups.
This is what the the wordpress media library shows trying to upload SVG, ” animated.svg An error occurred in the upload. Please try again later.”
It means that you may have error(s) in your initial SVG code. Try to open your SVG in Google Chrome directly, if any errors exist the browser will inform you.
The other reason may be that your SVG code contains non standard attributes, tags, etc. and the sanitization function of my plugin doesn’t allow them during upload. As I said in the documentation in the “Tips” section: <quote>After taken a result SVG code from Adobe Illustrator, Inkscape or Sketch, you can optimize this code via this SVG editor by Peter Collingridge especially if you use Inkscape, because it adds too many its own tags which are not necessary for web. But please be careful with optimization options.</quote> Do that optimization BEFORE creating animations in my Editor.
If this not help try to disable (uncheck) “Sanitize SVG Uploading” option on my plugin settings page.
If all above doesn’t help, do not use Media lib, upload your SVG file(s) via FTP.
When a non-animated SVG is opened in browser, the chrome doesn’t show up any errors but it does, after animating with animator.
What error it shows?
And by the way I provide a support via email, not in comments. Please send all other messages from the support tab above on this page.
Does it also work only when you hover over for ex a icon? It will just show the normal final (non animated) when you arent hovering over it.
The main purpose of Enliven ‘em! Animation Engine is to animate the “appearing” or “disappearing” of your vector illustrations when they become visible in a user’s browser viewport. Repeating of animations when user click or tap your graphic is a bonus.
Also there is no “mouse hover” event and it’s impossible to “loop” animation for a specific SVG shape (rect, circle, line, path, etc.), only the whole animation of your SVG.
(before purchase) Do you have a tutorial video for wordpress plug-in? I did not understand anything from the description on the web-site.
Thank you,
Hello,
No, there is no any specific video for WP.
The main purpose of this script is to animate the “appearing” of your vector illustrations when they become visible in a user’s browser viewport. Also your animations can be repeated when user click or tap your graphic (mouse hover is not supported).
Before purchase you can get familiar with the documentation: http://enlivenem.com/documentation-wp/index.html?v=1.4 and try to create your own animation in the animation editor which is available here: http://enlivenem.com/animator/animator.html?v=1.4
Thank you very much.
Thank you Vividwebdesigns!
markin6 you might want to save it as a .svg instead of .html. That is what I did and it works.
Thank you! You are right.
I copied the result code from editor ( edited with the script provided for local editing not wp plugin) and pasted in note pad and saved as html and loaded on browser and it doesn’t animate. What am I doing wrong?
Hello,
1) As vividwebdesigns said you need to save your code as SVG file, not HTML.
2) Upload that new file via Media lib or FTP to your server and use it as “src” for IMG tag with class “enlivenem”.
More info is available in the documentation.
Hi, DeeThemes, Greetings! Thank you very much for quick response!
1.) Cant I test that svg saved file from local machine without internet?
2.) And This is what it showed, after saving the result code as SVG. ” This page contains the following errors:
error on line 2 at column 36: Entity ‘ns_extend’ not defined Below is a rendering of the page up to the first error.”
Before It wasn’t showing any such errors with a non-animated or default SVG, but it shows something after I put up resultant code (animated code).
Hello,
1) If you have any LAMP server installed on your HDD and if your WordPress works on this local webserver then yes you can test my script on your local machine.
2) Your vector editor, which you used for creating your SVG (not mine Animation Editor) added this “ns_extend” attribute,. As I know that attribute doesn’t need for Web and you can simply remove it from your code.
I’ve installed xampp not LAMP, is that ok?
Ok, if your WordPress works on your xampp. You can simply try.
Is it must that I should have a value of either “In” or “out” for “To:”, for the animation to work or begin? I just want the element to be there and animate after certain delay but, without giving a value for “To:” field, the animation doesn’t work or start at all.
Yes it must. As I said the main purpose is to animate “appearing” (In) or “disappearing” (Out) of SVG elements when you illustration becomes visible in a browser viewport.
So I think that my product doesn’t suit your needs. In any case thanks for the interest.
But I liked your product! I can imagine how much of logical hardwork went into getting this product here on codecanyon.
Thank you very much!
Is it possible to add multiple animations for one single layer?? Like for example, I want to drop a wheel/gear from top with some smooth effect and then the same wheel/gear should spin to create moving effect on floor.
Not directly. If you want to make several animations on one basic element, wrap it with additional <g> tags as many as you need animation steps and apply different animation options for these created groups.
And by the way the main purpose of this script is to animate the “appearing” of your vector illustrations when they become visible in a user’s browser viewport. Repeating of animations when user click or tap your graphic is just a bonus.
Also there is no “mouse hover” event and it’s impossible to “loop” animation for a specific SVG shape (primitive), only the whole animation of your SVG.
1.) Are you planning to include “mouse hover” event in coming future updates?
2.) I did not get your point, ” it’s impossible to “loop” animation for a specific SVG shape (primitive), only the whole animation of your SVG.” ? What if I want to just animate one single element in my whole illustration composition (in svg format), doesn’t it work you mean?
1) Not at present time. Maybe in future.
2) No, loop will not work for a single shape.
okay, Thank you!
HI,
1.) Doesn’t it work when the file consisting of these animations or stored on local harddrive (after purchasing)? Why is it mentioned in the video that the animation doesn’t work when loaded onto browser from local harddrive? Why so ,does the animations always needs Internet for them to function? or the animations has some internet connected dependencies that makes them to function then only? -> If so, that disappoints me and cant purchase.
2.) Can I just animate any illustration that’s drawn on adobe illustration platform? (Please let me know what’s the process involved so has to animate my adobe illustrations artwork?)
1) It works from HDD when you place your SVG code directly into your HTML page. It doesn’t work from HDD (only from a working live web server) when you use your SVG by <IMG> tag due to AJAX request which is not work from HDD due to CORS restrictions.
2) I do use Adobe Illustrator in my own work, but I strongly recommend to make an optimization of your SVG code (for ex. by http://petercollingridge.appspot.com/svg-editor) before creating an animation.
You can always try my Animation Editor http://enlivenem.com/animator/animator.html?v=1.4 with your own SVG before purchasing.
Hi
1.) What’s CORS? Is it some organisation? Can you explain it in brief and also share the link of official CORS for me to give some read-up?
2.) I don’t know why my plan SVG show up loading status for longer time in browser. Is it because of size. My svg is of size 11KB on which I’m currently working on . Can you explain please? This is happening for just single icon, if this is the case it’s gonna take so much of time for my webpage to load if I have 10 animated svgs in a row. What am I doing wrong. what can I do for them to load very quick?
3.) I’m trying your editor now!
Thank you Regards
1) https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
2) I don’t know too. Maybe there are errors in SVG code.
I just used “save as template” and then chosen SVG format for an adobe illustrator art to be saved as SVG. That’s how SVG code generated, so is it so that I can still expect SVG code errors to happen?
Try to open your SVG in Google Chrome directly. If there are any errors Chrome will show them to you.
ok Thanks alot!
1.) And as per the CORS link, it’s this ” Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.[1] “
So what’s that another domain, from which the resource originated (another domain ) in our case?
No other domain. As I’ve said already, you just need to use my script on a live working web server (where you host your site) if you will define your SVG as an URL for “src” attribute of IMG tag.
If you place SVG code inline in your HTML markup you can even use my script from your HDD.
So is it that if I place SVG code inline in my HTML markup, your script works on my local harddrive without my computer connected to Internet?
Exactly.
Okay..
Hi Dee!
It’s clear now! But I want it in clear syntax statement. So can I use your script and wp plugin on my localhost:8082 WordPress installation, not connected to internet. I’m working on localhost (xampp control panel), sometimes machine is not connected to internet as I travel from place to place. Just clear me this.. sorry for to many questions.
If your WordPress works on your localhost, then my plugin should work too.
Hi, Yes my wordpress works! Okay, Thank you very much! Gonna purchase it!
Regards!
I can’t upload my svg pic to wordpress it gives me an error saying “Error calculatornew.svg An error occurred in the upload. Please try again later.” I have tried later and there is still an error. I have tried uploading the originally svg and it uploads but when I edit in your editor then try to upload to Wordpress I get an error. I’m using the most up to date wordpress version 4.2.4 I hope you can help me.
Thanks Allan
Hello Allan,
Please try to uncheck the “Sanitize SVG Uploading” option on a plugin setting page, save settings and try to upload your SVG again. Also the reason can be due to some “security” plugin if you use any one.
If this will not help I see only the one way: use a FTP uploading to some folder on your server and use an URL in your IMG tag something like this:<img class="enlivenem" src="http://www.yoursite.com/some_folder/your_svg.svg">
Regards, Dee
Hi i’m sorry this is a clients site I don’t have admin or ftp right.
use an URL in your IMG tag something like this: I don’t know what you mean sorry.
When I uncheck the “Sanitize SVG Uploading” option on a plugin setting none of the media pictures would load until I deactivated your plugin.
If you don’t have admin rights please be sure that “Restricted to Administrators” option is unchecked on a plugin setting page.
In case unchecking “Sanitize SVG Uploading” I’m almost sure that there is a security third party plugin which prevents uploading SVG with special “enlivenem” attributes in its code.
Unfortunately, in your case I don’t see any other way than using FTP uploading. Sorry.
Under the “URL in your IMG tag” I mean that you need to know a path to your uploaded file to insert your SVG in a page/post after FTP upload.
I have sent username and password by email just now
Ok I don’t know if you done anything but I tried another svg and edited in the editor differently. Instead of using the top level grouping and making it outline all at once, I made each path outline. which has been uploaded and works in wordpress. Thanks for your help.
Oh, I see, I’m glad that everything is fine. Maybe there was an error in SVG code itself. In general, before creating an animation you can simply open your SVG file in Google Chrome directly. If there are any errors in SVG, Chrome will inform you in what line they are.
Good luck with your project!
I’m still having a problem. When I see the results in the editor there is meta data see below:
<metadata> <sfw xmlns=”&ns_sfw;”> <slices/> <slicesourcebounds height=”88” width=”66” y=”-13.5” x=”-3.5” bottomleftorigin=”true”/> </sfw> </metadata>
<title>Slice 1</title> <desc>Created with Sketch.</desc> <g sketch:type=”MSLayerGroup” xmlns=”http://www.w3.org/2000/svg”>
What is this? In your video there is nothing like that code and when I load it in browser I get an error see below:
This page contains the following errors:
error on line 5 at column 79: Namespace prefix sketch for type on path is not defined Below is a rendering of the page up to the first error.
Thanks for your help.
This code is not inserted by my Animation Editor, it was generated by your Sketch.
You can simply delete all <metadata>, <title> and <desc> tags with their content, and replace the last <g sketch:type=”MSLayerGroup” xmlns=”http://www.w3.org/2000/svg”> with one simple <g>.
OK thanks for that, that work on my site. Unfortunately the svg pic is huge when it is animated.it should be 68×90. This is the page it is on https://www.voguewebservices.com/3157-2/
Thanks again for your heip
Of course it is big because you set “responsive” option and when it is so you cloud2.svg takes 100% width of its parent container (<p> in your case).
I recommend to use a shortcode as I describe in the documentation:[enlivenem_wrapper class="some_class_if_needed" style="width:68px;" source="https://www.voguewebservices.com/wp-content/uploads/2015/08/cloud2.svg"]
Set the “width” with any desired value in px, %, em, etc.
[enlivenem_wrapper class="some_class_if_needed" style="width:68px; margin:0 auto;" source="https://www.voguewebservices.com/wp-content/uploads/2015/08/cloud2.svg"]
Ok thanks for your help.
Hi DeeThemes,
This is a fantastic plugin!
I am currently trying to “enliven” the svg I have set as a background image of a section on a wordpress page.
http://mock2.meridiandesignsc.com/?page_id=315I believe I’ve added the correct css selectors to the settings but can’t seem to get it to work. If you could offer guidance as soon as possible that would fantastic and make this plugin even better!
Thanks,
Alex
Hello Alex,
You are trying to use SVG file in a wrong way. No matter what kind of script you use, Enliven’em or any other one, there is no way to animate SVG which is used in “background-image” style. It’s impossible.
All you can do is to place your SVG file as a source for IMG tag and put this IMG into some DIV. All content which you want to be above your illustration you can place in another DIV with absolute positioning and appropriate z-index. I can’t help with that, it’s completely out of scope of my support.
Besides that there is one more problem with your site, it’s not working correctly in Google Chrome, because you don’t have a signed secure certificate for using HTTPS protocol.
Regards, Dee
Hi DeeThemes,
This is a fantastic plugin!
I am currently trying to “enliven” the svg I have set as a background image of a section on a wordpress page.
http://mock2.meridiandesignsc.com/?page_id=315I believe I’ve added the correct css selectors to the settings but can’t seem to get it to work. If you could offer guidance as soon as possible that would fantastic and make this plugin even better!
Thanks,
Alex
Your plugin is causing issues to my Media Library. I can’t view my thumbnails in the media library in grid view when this plugin is active. They do show in list view BUT that there is not an option to view list view then adding media to a post or page. I need a fix for this or your plugin is totally useless.
Hello,
It’s strange. Seems that there is some conflict with third party plugin.
Can you please comment the line 245 in “enlivenem-for-wp.php” file which you can find in “wp-content/plugins/enlivenem-for-wp” folder on your server by adding 2 slashes at the beginning? Like this://add_filter('wp_prepare_attachment_for_js', 'enlivenem_prepare_attachment_for_js_filter', 10, 3);
This action will disable thumbnails of SVG files in Media Library, you will see just a “file” icon and file name in grid view.
If this will not help can you please give me a temporary access to your WP dashboard so I will try to help? If yes please email me login details from the “Support” tab above on this page.
Thanks that worked
You are welcome!
