Code

Discussion on Enliven 'em! - SVG Animation Engine for WordPress

Discussion on Enliven 'em! - SVG Animation Engine for WordPress

Cart 816 sales

DeeThemes supports this item

Supported

164 comments found.

Hi, great product. I can’t however seem to get the animation working. Not in WP and not in stand alone HTML file. I do use the class enlivenem. any idea what I am doing wrong. The animation does work in the Animator.

tnx

OK, tnx. It didn’t work in WP either, so that’s why I thought I could put it in a plain HTML. Sorry, new to SVG ;-)

Does it have anything to do with uploading the svg file into WordPress media? I get message that’s not allowed and upload failed. But when I go back to media, the filke is there … strange. If I use another oplugin that allows svg’s to be uploaded, it conflicts with your plugin.

It’s strange. In that case I recommend to upload your SVG via FTP to any desired folder on your server and use as an URL to your SVG file something like this:
http://yoursite.com/your_folder/your_file.svg

Hey DeeThemes, I haven’t purchased this yet but I will this week. I’ve had this in my favorites for awhile and the more I see it the more amazed I am with what you’ve done here. This is exactly where Envato shines, providing a place for tools that can make good designers excellent designers. Thanks so much for your hard work and I’m looking forward to learning and using this system!

Thank you for the interest very much! I hope that you will find my product useful. You can also check the documentation and try the Animation Editor on my demo site before purchasing.

Good luck!

Hi, I just bought the plugin, from what I saw on the page, very useful for designers however I m now sitting with a problem in wordpress.

I created an animation in the editor, works well in the editor, I installed the plugin and imported an SVG. The animation is not working at all.

I recon, it has something to do with enlivenem.css as that file is not in the plugin, I believe it has to be uploaded to the css folder please correct me if I m wrong.

Please help as its a bit urgent

Hello, answered to your email.

Hello, i´ve purchased your plugin. But the animations don´t run on my wordpress install. I don´t know where the problem ist. Could you help please?

Hello,

Please email me from the “Support” tab above the URL of your page/post where I can test your animation by myself.

Hello.

Great great GREAT plugin! Very nice and sexy.

I have a small problem. When I activate the responsive option, and embed my svg on wordpress, the svg appears very very small (usually its 800px wide, and now it appears to be not even 80px). I tried a non animated svg (still used the animator code), and it appears in its full width. But as soon as I add an animation, the svg becomes tiny tiny. Is there a way to the de-activate the responsive general option, but still embed (with raw html within wordpress) a responsive svg?

I feel like I’ve exhausted every options. Thanks for the help.

Answered.

It worked ! Damn I love this plugin ! Thanks for the help, and for the good words on my svg animation ;-)

You are welcome! You can rate my work on a download page if you wish :)

Hello, PM sent ! Thank you

Hello, replied by email.

Hi, Do you know if I can use icons animated with Enliven’em in Revolution Slider? Thanks

Hello,

Can’t say exactly, I didn’t try. But I think if you can use them they will work (animate) only once.

Hello all,

I’d like to inform you that the recent XSS vulnerability doesn’t take affect on my WP plugins cause I don’t use any compromised WordPress functions and TGM Plugin Activation class.

Thank you.

Ok first off, sorry for my possibly dumb question but I am just now getting into the svg bandwagon. Can this be used to create an animated logo preloader?

Hello,

No I don’t think so. The main purpose of this script is to animate your SVG when it becomes visible in a browser viewport.

Thanks for the interest.

I am interested in purchasing the basic license and am wondering if the newest version is compatible with WP 4.1.1? I see the plugin hasn’t been updated since 2014 and am concerned that development has ceased for this plugin.

Hello,

Yes, my plugin is compatible with WordPress 4.1.1.

This looks AMAZING! Is there a way to use Greensock GSAP.js library to power it INSTEAD of jQuery? Greensock is WAY more efficient than jQuery.

If not, what would you charge to make that adjustment? Please let me know. Thanx! And GREAT WORK!!

Hello,

First of all there are no jQuery animations. All animations are powered by Snapsvg lib.

I thought about GSAP when developing this script, but unfortunately GSAP can’t animate “string” values, only “numeric” ones and thus we can’t realize “morph” animations for path(s). That’s why I don’t use GSAP in this item.

Thank you for your words!
Regards, Dee

Is there any sort of fall back option for browsers that don’t support .SVG?

Hello,

No, this script is for animating SVG only.

Do you have any rec’s on fallback options? (just purchased it!)

No, unfortunately it’s not possible due to SVG nature.

This question has been asked before, but the answer was sent through email it seems. I would really like to know this before buying.

Is it possible to do a “Draw SVG path” on scroll? I mean not starting the animation in a loop but control it when scrolling up or down.

If it is not supported is there any possibility that it will be added in the future or any workaround that could be based on your plugin?

Thank you in advance. You have an awesome product can’t wait to purchase

Yes, I saw this site before. But as I said it’s not possible with my script.

I understand, well thank you anyway, I am still going to purchase the plugin to play with it and see what I can come up with.

Would you be available to take this as freelance?

No, I don’t take any jobs. Good luck!

Very very good job, thumb’s up !

Thank you!

Hi is it possible to save the icon as a SVG or other things? thank you!

Hello,

I’m sorry but I don’t understand what you mean. This is an animation engine for already prepared and saved SVGs from any vector graphic software. What the icon do you mean?

ok I am looking for an icon generator for public not for admin

I’m afraid no, this is not an item what you are looking for.

In any case thanks for the interest.

Heloo DeeThemes I want to buy this perfect plugin, just wanna be sure this is what I want. Here is my logo http://i.imgur.com/6QUfRE6.png , I have it in vector format. So I can enlive it with your plugin, right? Does it compatible with Multinews theme? and is there any theme with your plugin ready?

Hello,

In the front-end there are 2 scripts: the Snapsvg lib ~ 72 kB and the Enliven’ Em script itself ~ 35 kB. Also the load speed depends of a size of your SVG files.

I can say nothing about any conflicts, it can be very individually, but if you want to animate SVGs which are loaded via AJAX you need to call .enlivenem() method after AJAX is complete. Please look at the “Advanced usage via JavaScript (for Developers)” section in the documentation for the info about that method.

Hello :) Do you do the animation process of the logo as a freelance project?

Hello,

Unfortunately no, I don’t take any freelance jobs, completely don’t have a free time. Sorry.

Hello,

I have created a page where I need to display 6 svg graphics and one larger infographic all of which I want to animate. Although I have found my way through the editor and everything works fine as soon as I add the second svg image to the page it does not render correctly.

Is there a limitation on how many separate animated svgs you can place on the same page? Because all my files work fine if they are “alone” in the page but as I soon as I add a second (3rd, 4th, etc) animated svg image on the page rendering issues occur. To be more specific as soon as the animation completes certain elements disappear.

Any help would be appreciated.

Thanks

Hello,

No, my script doesn’t have any limitation of a number of animated files on a one page.

I guess that this issue can be caused by similar IDs of SVG elements. As you may know IDs (not like “classes”) must be unique on a one page due to HTML standards. Please check your SVG code for repeating IDs.

If this will not help please email me the URL of your page from the “Support” tab above, I will look by myself.

Best regards, Dee

Bingo! That was it! I guessed something was “overlapping” if I may say so but since I am trying to learn this is expected.

What happened was that I created a single Illustrator file with layers each containing one of those graphics. I was under the impression that by turning off the layers data are not exported to the SVG file but I think I was wrong.

What I did was to create a separate AI file for each of the graphics, properly named the sublayers for each file and now everything works fine.

Another slight issue was that on some of the exported svg files from the editor there were xml errors which I found that was ampersands outputed as “&” instead of “&” which I corrected manually. Strange since this did not happen with all the files originally containing text with ampersands.

Finally, I had a compound path in my original files that had a drop shadow effect on it that I of course had to remove and replace with an SVG filter that I customized to achieve a shadow.

On this compound path I applied a DrawLine animation and worked fine. Then I created a Graphics Style from this, saved it and applied it to the other graphics (on the other files). However, DrawLine was not working fine with those although it appeared to be different. I copied and pasted the Original compound path to all the other files instead applying the graphic style and DrawLine worked fine. I don’t know what is causing this but might give a hint to anyone that comes across this issue.

Anyway, svgs are great but one needs to get familiar with them when they go to the web…

Thanks a lot for your help.

I’m really glad that you fixed this issue.

Thank you for the purchasing and good luck with your project!

Hello from Hamburg,

I’d like to buy your plugin. Is there also a way to purchase one of the logos used on your examples page (“N Logo” site:http://enlivenem.com/enlivenem-logos.html?v=1.4)?

Best Regards CK

Hello,

Thanks for the interest.

I’m not an author of example logos. I downloaded them from freepik.com and animated just for demo purpose. Unfortunately I didn’t store a link for initial file.

Best regards, Dee

Oh, i forgot, and i think it can be useful for everyone, how can i trigger effect on hover, on click, focus, and selected? can i loop animation? Is this possible only with css stylised svg?

I think there is some misunderstanding.

My script start animations in two ways: 1) when your SVG becomes visible in a user’s browser viewport and 2) it can be repeated by click.

I didn’t declare that other events like “hover”, “selected”, etc. will start animations.

I have plans to realize the repeating “onhover” but can’t give any guaranties.

“Loop” animation can be made. You need to change one global option. Please look at the documentation for the details.

Ok, only css animated svg are properly animable on hover etc, you should state this in you product description. I got screwed. Uninstalled.

Hello, this is a very great tool you made here, congratulations. So i’ve just bought it because i’m actually in the process of customizing the easy word parallax slider http://wordpress.org/plugins/easy-wp-parallax-slider/ to make a section slider triggered with icons on top. In fact i already did it on a pure html template with owl caroussel: [EDIT: link removed] and now i’am trying to replicate it in wordpress because i wan’t to upgrade the website.. So i have this question: how can i add these svg icons as icon pager? just adding the class in js?

And, my svg icons are always very big when i upload them, i have to rescale them with shortcode svg tag, but can’t use the img tag cause they won’t scale..

Oh… and by the way, how can i add this css effect to the icon?(very first one in the page) http://tympanus.net/Development/IconHoverEffects/ Thanks a lot

Hello,

First of all you need to prepare (animate) your icons in the Enliven ‘em animation editor.

Please be sure that your initial SVG code has the “witdth” and “height” attributes within a main “svg” tag. Think of your SVG icon like it is a regular image with its own width and height. So you use it with “img” tag and “as icon pager” instead of any regular image like JPG, PNG, etc.

In the animation editor, if you set global option to “responsive” your resulting icon will take 100% width of its parent container in your HTML markup. If you set this option to “notResponsive” its width will have the value which is defined in “width” attribute. Thus you CAN use “img” tag with class “enlivenem” for start animating, my script automatically convert SVG from “img” tag to its in-line form.

The hover effect from tympanus, you have provided, is not related to my script and I can’t help with that. Sorry.

Best regards, Dee

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey