Latest version: 1.8
Thank you for the purchasing of "Enliven 'Em" script! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. If you like these script please rate it with . Thanks so much!
After downloading you will find the following folders in the archive:
animator: This folder contains the Animation Editor which can help you to prepare your SVG illustrations for using with the Enliven 'Em script itself. Please DO NOT upload this Editor to any server (hosting), it's developed for your local use only.
documentation: As title said this is the documentation.
for_upload: This one is for uploading to your server (except sample files). The folder contains all necessary files in minified form to reduce your bandwidth and loading time. The non-minified main JS file js/enlivenem.src.js is also available.
Upload to your server all the files and directories from the for_upload folder.
If you already use jQuery on your site do not upload it from my folder again.
After uploading you need to declare CSS file in the <head> section (or just copy its styles into your existing style sheet) and JS files before the closing </body> tag in your HTML page.
Note: I strongly recommend to place all JS declarations before the closing </body> tag at the end of your HTML document, not in a head section.
For example:
<head> ... <!-- all your other CSS files go here--> ... <link href="css/enlivenem.css" rel="stylesheet"> </head> <body> ... <!-- All you page's code goes here --> ... <script src="path/to/your-jQuery-copy.js"></script> <script src="js/enlivenem.tools.js"></script> <script src="js/enlivenem.min.js"></script> </body>
path/to/your-jQuery-copy.js
Now you are ready to enliven your vector graphic. How to prepare your SVG code for Enlive' em script is described later.
You can use your SVGs with the script in the two ways:
Via embedding SVG code into your HTML code. I recommend to use this option for small SVG files, like icons for example.
In that case you need to add class enlivenem to your <svg> tag.
<div class="some-class">
<svg class="enlivenem" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" data-global-elvn="enableViewport, enableClick, full, startInvisible, responsive, 0, notLoop, 500">
<circle class="elvn-layer" data-elvn="expandY, in, 0, 800, bounce" fill="#E74C3C" cx="50" cy="50" r="50"></circle>
</svg>
</div>
The other way is to use your SVG file as a source for <img> tag.
In that case you need to add class enlivenem to your <img> tag.
<!-- somewhere inside the body --> <img class="enlivenem" src="http://your_site.com/path_to/your_file.svg">
The script will convert the SVG image from this tag to its in-line form automatically.
In both cases after window is loaded the script will check any <img> and <svg> for class enlivenem and start their animations if any.
If a visitor has disabled JavaScript, your image will still be visible in his/her browser, but without animation of course.
Using class enlivenem is not mandatory. You can use any other ID or class name if you want to start Enliven' em script programmatic.
In that case use the custom jQuery method: jQuery( '#some_id_or_.some_class' ).enlivenEm( callback );
The callback function (if passed) will be invoked when all svg data is ready to start the animation.
Also if you want to invoke the click event programmatic on your SVG illustration you can use special method jQuery( '#some_id_or_.some_class' ).svgClick(); because the standard jQuery method .trigger('click') doesn't work with SVG.
The main: All the animation data and global options are included in SVG code itself via class name and HTML5 data attributes. The script finds all these data in your SVG code (file) and produces animations and applies options.
You can add these data and options by hand writing in a code or, the better way, use the Animation Editor for doing that in a WYSIWYG mode. Look for the Editor in the animator folder.
You can animate the following SVG tags only:
circle, ellipse, g, image, line, path, polygon, polyline, rect, text and use.
Using animations on any other tag may cause an unexpected results.
Also please keep in mind that the drawLines effect will not work for image, text and use tags.
Here is an example of SVG code (for "Infinity" icon), which is ready to use with the script:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" data-global-elvn="enableViewport, enableClick, full, startInvisible, responsive, 0, notLoop, 500"> <circle id="loop-background" class="elvn-layer" data-elvn="expandY, in, 0, 800, bounce" fill="#E74C3C" cx="50" cy="50" r="50"></circle> <path id="loop-sign" class="elvn-layer" data-elvn="drawLines, 800, 800, #065462, 6, notRandom" fill="none" stroke="#F0C419" stroke-width="8" stroke-linecap="square" stroke-miterlimit="10" d="M12.5,50.5c0,10,7,17,17,17c17,0,26-34,43-34c10,0,18,7,18,17s-8,17-18,17c-17,0-26-34-43-34C19.5,33.5,12.5,40.5,12.5,50.5z"></path> <path id="loop-shade" class="elvn-layer" data-elvn="fade, in, 1400, 200, linear" opacity="0.15" d="M45.938,50.5l5.046,6.516c0,0-2.141,2.797-3.5,4.25c0,0-3.547-3.609-5.477-5.88C43.316,53.983,45.938,50.5,45.938,50.5z"></path> </svg>
Important! You must have defined width and height and/or viewBox attributes of the main svg tag. Also the script works only with the pixel units! You can't use em, %, etc., only px. Think of your SVG illustration like any other image which has its own width and height. If you want to make your SVG responsive, simply define responsive option in the data-global-elvn attribute.
If you have to use em, %, etc. instead of px, you can wrap your Enliven 'Em image with an additional div or span and apply styles with em, %, etc. values to it.
This option are added to svg tag itself to data-global-elvn attribute.
The order of commands are very important! Please do not mix them.
Example: data-global-elvn="enableViewport, enableClick, full, startInvisible, responsive, 0, notLoop, 500"
| option | value | description |
|---|---|---|
| 1 | enableViewport disableViewport |
If value is "disableViewport", animations will NOT start when SVG appears in users browser viewport. |
| 2 | enableClick disableClick |
If value is "enableClick", animations can be repeated when a user clicks SVG. |
| 3 | none oneFourth oneThird oneHalf twoThird full |
Take effect when "enableViewport". It means that animation starts only if SVG is in a viewport at least the given value, calculated from SVG height. |
| 4 | startInvisible startVisible |
if "startInvisible" the SVG becomes invisible when page is loaded. Suitable for "in" animations. |
| 5 | responsive notResponsive |
If "responsive", SVG will be wrapped with the special container and responsive styles will be applied from enlivenem.css file. Also width and height attributes will be removed and viewBox one will be added. |
| 6 | integer from 0 | The global delay in milliseconds before animation starts |
| 7 | loop notLoop |
If "loop", SVG animation will be repeated infinity, repetition on "click" will be disabled and not take affect. |
| 8 | integer from 500 | The time of pause in milliseconds between every animations repetitions. Strongly recommended to set this value no less that 1000 - 2000 ms. |
As I said earlier you can animate the following tags:
circle, ellipse, g, image, line, path, polygon, polyline, rect, text and use.
You can do this by adding class elvn-layer and data-elvn attribute to those tags. For custom animation you need to add one more attribute: data-elvncustom. For morph animation you need to add one more attribute: data-elvnmorph. For along a path animation you need to add one more attribute: data-elvnalongpath.
The order of commands are very important! Please do not mix them.
There are seven (7) different types of animation. Each type has its own options and the own order of those options in data-elvn attribute.
Example: class="elvn-layer" data-elvn="fadeLongR, in, 700, 1000, easein"
| option | value | description |
|---|---|---|
| 1 | Name of effect (one of the following): expandB, expandL, expandR, expandT, expandX, expandY, fade, fadeLongB, fadeLongBL, fadeLongBR, fadeLongL, fadeLongR, fadeLongT, fadeLongTL, fadeLongTR, fadeShortB, fadeShortBL, fadeShortBR, fadeShortL, fadeShortR, fadeShortT, fadeShortTL, fadeShortTR, flipX, flipY, flyC, flyRotateC, flyScaleC, rubberX, rubberY, scaleB, scaleBL, scaleBR, scaleC, scaleL, scaleR, scaleT, scaleTL, scaleTR, stamp, wheelB, wheelL, wheelR, wheelT, wheelC |
The better way is to play with these values in Animation Editor. Nevertheless, the capital letters mean: TL - top-left, T - top, TR - top-right, R - right, BR - bottom-right, B - bottom, BL - bottom-left, L - left, C - center, X - horizontal, Y - vertical |
| 2 | in out |
If "in", the animation will go to neutral position. If "out", the animation will go from neutral position. |
| 3 | integer from 0 | The delay in milliseconds before an animation starts. |
| 4 | integer from 0 | The duration in milliseconds of an animation. |
| 5 | backin backout bounce easein easeinout easeout elastic linear |
The name of easing function. Default is "linear". |
Example: class="elvn-layer" data-elvn="maskClockOne, in, 1000, 1500, easeinout"
| option | value | description |
|---|---|---|
| 1 | Name of mask effect (one of the following): maskCircle, maskClockOne, maskClockTwo, maskCross, maskCrossRotate, maskEllipse, maskExpand, maskGradB, maskGradL, maskGradR, maskGradT, maskLouversX, maskLouversY, maskPanX, maskPanY, maskPlus, maskPlusRotate, maskRect, maskRhomb, maskSlideB, maskSlideBL, maskSlideBR, maskSlideL, maskSlideR, maskSlideT, maskSlideTR, maskSlideTL, maskStackX, maskStackY, maskTighten |
The better way is to play with these values in Animation Editor. Nevertheless, the capital letters mean: TL - top-left, T - top, TR - top-right, R - right, BR - bottom-right, B - bottom, BL - bottom-left, L - left, X - horizontal, Y - vertical |
| 2 | in out |
If "in", the animation will go to neutral position. If "out", the animation will go from neutral position. |
| 3 | integer from 0 | The delay in milliseconds before an animation starts. |
| 4 | integer from 0 | The duration in milliseconds of an animation. |
| 5 | backin backout bounce easein easeinout easeout elastic linear |
The name of easing function. Default is "linear". |
Example: class="elvn-layer" data-elvn="gaussBlur, in, 0, 1000, 16"
| option | value | description |
|---|---|---|
| 1 | gaussBlur | Name must be exactly gaussBlur |
| 2 | in out |
If "in", the animation will go to neutral position. If "out", the animation will go from neutral position. |
| 3 | integer from 0 | The delay in milliseconds before an animation starts. |
| 4 | integer from 0 | The duration in milliseconds of an animation. |
| 5 | Integer from 0 | The value of standard deviation for Gaussian blur SVG filter. |
Example: class="elvn-layer" data-elvn="drawLines, 0, 2000, red, 3, random"
| option | value | description |
|---|---|---|
| 1 | drawLines | Name must be exactly drawLines |
| 2 | in out |
If "in", the animation will go to neutral position. If "out", the animation will go from neutral position. |
| 3 | integer from 0 | The delay in milliseconds before an animation starts. |
| 4 | integer from 0 | The duration in milliseconds of an animation. |
| 5 | HEX, RGB or HTML name | The color value for drawing line. |
| 6 | random notRandom |
Take affect when drawLines is applied for <g> tag. All shapes (primitives) in this group will be drawn with random duration within the limit of duration option above if this value is set to "random". |
Example: data-elvn="custom, in, 0, 1000, 100, easeinout" data-elvncustom="t100,0s2,2r-270"
Please pay attention that "custom" animation must have one more data-elvncustom attribute.
| option | value | description |
|---|---|---|
| 1 | custom | The name must be exactly custom |
| 2 | in out |
If "in", the animation will go to neutral position. If "out", the animation will go from neutral position. |
| 3 | integer from 0 | The delay in milliseconds before an animation starts. |
| 4 | integer from 0 | The duration in milliseconds of an animation. |
| 5 | integer from 0 to 100 | The percent based opacity value. |
| 6 | backin backout bounce easein easeinout easeout elastic linear |
The name of easing function. Default is "linear". |
Value for data-elvncustom attribute:
| value | description |
|---|---|
| transform string | Here you can define your own transformation string. Here is an explanation by Dmitry Baranovsky, the author of Snap.svg: Transform string can be for example: "t100,100r30,100,100s2,2,100,100r45s1.5" Each letter is a command. There are four commands: t is for translate, r is for rotate, s is for scale and m is for matrix.There are also alternative "absolute" translation, rotation and scale: T, R and S. They will not take previous transformation into account. For example, T100,0 will always move element 100 px horisontally, while t100,0 could move it vertically if there is r90 before. Just compare results of r90t100,0 and r90T100,0.So, the example line above could be read like "translate by 100, 100; rotate 30° around 100, 100; scale twice around 100, 100; rotate 45° around center; scale 1.5 times relative to center". As you can see rotate and scale commands have origin coordinates as optional parameters, the default is the center point of the element. Matrix accepts six parameters. |
Important: "morph" effect can be applied for path elements only!
Example: class="elvn-layer" data-elvn="morph, in, 0, 1000, easeinout" data-elvnmorph="M171.207611,110.342499c39.094391,-97.125
192.262817,0 0,124.875c-192.263035,-124.875 -39.094742,-222 0,-124.875z"
Please pay attention that "morph" animation must have one more data-elvnmorph attribute.
| option | value | description |
|---|---|---|
| 1 | morph | The name must be exactly morph |
| 2 | in out |
If "in", the animation will go to neutral (initial) path's shape form. If "out", the animation will go from neutral (initial) path's shape form. |
| 3 | integer from 0 | The delay in milliseconds before an animation starts. |
| 4 | integer from 0 | The duration in milliseconds of an animation. |
| 6 | backin backout bounce easein easeinout easeout elastic linear |
The name of easing function. Default is "linear". |
Value for data-elvnmorph attribute:
| value | description |
|---|---|
The string of path's shape. Equivalent of d attribute of path tag |
Let's look at the following piece of code from morph-example.html, which you can find in the for_upload folder: <path
id="rabbit"
fill="#ecf0f1"
stroke="#95a5a6"
stroke-width="1.5"
d="m181.40759,251.27267c-7.9451,-3.58209 2.42215,-10.74704 6.34988,-13.91507c2.64214,-2.4407 -15.1562,0.34122 -7.64163,-8.13013c8.24553,-6.92123 5.12946,-18.63034
... code here is cut for this documentation example ...
-8.97668,18.74234 -19.42767,21.05322c-4.69867,1.30383 -9.52798,2.34979 -14.33823,0.93234l0,0l0,-0.00002z"
class="elvn-layer"
data-elvn="morph, out, 500, 1600, linear"
data-elvnmorph="m374.13251,58.42095c-8.47952,-13.53757 -26.15018,-11.09409 -39.30161,-14.16914c-10.92059,-4.52627 -27.64563,-8.86669 -35.41534,4.08142c-10.37021,12.08472
... code here is cut for this documentation example ...
19312,-21.79065 23.9285,-20.94555c6.86792,-0.95702 13.76114,-1.75237 20.5882,-2.99516l0,0l0,-0.00003z">
</path>
Here you see the On the other side the value of So my script changes the On the other words you need to prepare 2 shapes path's data in your vector graphic software, so they can be morphed from one into another.
"Morph" effect doesn't control an opacity! So the
path element with this effect will be visible when page is loaded. If you need to control the opacity of your "morphed" path(s) please wrap it(them) with an additional g tag and apply the "fade" effect to this added group. Also you can try for that group the "custom" effect with desired opacity value and with neutral transform string in Snapsvg format: "t0,0".
|
Example: class="elvn-layer" data-elvn="alongPath, end, 0, 2000, -90, easeinout" data-elvnalongpath="M181 127h1c2.6 ... 125v-10"
Please pay attention that "along a path" animation must have one more data-elvnalongpath attribute.
| option | value | description |
|---|---|---|
| 1 | alongPath | The name must be exactly alongPath |
| 2 | start end |
If "start", the animated element will move from ending path's point to the starting point of that given path. If "end", the element will move from starting path's point to the ending point of that given path. |
| 3 | integer from 0 | The delay in milliseconds before an animation starts. |
| 4 | integer from 0 | The duration in milliseconds of an animation. |
| 5 | integer in range [-180, 180] | The rotation angle in degrees of an animated element. Try -90 or 90 values for rotating an element in a path's direction. |
| 6 | backin backout bounce easein easeinout easeout elastic linear |
The name of easing function. Default is "linear". |
Value for data-elvnalongpath attribute:
| value | description |
|---|---|
The string of path's shape. Equivalent of d attribute of path tag |
You should create a path inside your vector software (say Adobe Illustrator), along which the other SVG element will be animated. After saving your file as SVG, simply copy a data from the d attribute of that created path. To prevent an unwanted rotation when the animation is finished, please create your path with a little straight line tips at that path's start and end points.
"Along a path" effect doesn't control an opacity! So an element with this effect will be visible when a page is loaded. If you need to control the opacity of your "alongPath" element(s) please wrap it(them) with an additional
g tag and apply the "fade" effect to this added group. Also you can try for that group the "custom" effect with desired opacity value and with neutral transform string in Snapsvg format - "t0,0".
|
<rect fill="..." stroke="..." stroke-width="..." opacity="..."></rect>
g tags as many as you need animation steps and apply different animation options for these groups.
defs. One exception is elements for use tags. But be carefully with use elements, sometimes they give unexpected results.
path elements.
The Animation Editor, which you can find in the animator folder can help you to prepare your SVG code for Enliven 'Em script with easy.
It's impossible to describe all working aspects with Editor in this documentation file, so here is a screenshot with some interface description.
Explanations:
For the details of how to work within the Editor please watch the video tutorial, which you can find on my demo site and/or on my Youtube page.
The width of line for drawLines effect can't be more than 6px. The script will limit this value automatically for IE only.
The maskCrossRotate and maskPlusRotate effects don't work as expected in IE.
FIXED from v1.3
drawLines effect doesn't work at all. Fallback to fade is provided for Opera.
FIXED from v1.3
gaussBlur effect is not working in IE9 because IE9 doesn't support SVG filters at all (Works fine in IE10 and IE11). Fallback to fade is provided for IE9.
Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this package. No guarantees, but I'll do my best to assist. If you have a more general question relating to Enliven 'Em script, you might contact me via my user page contact form here. And again if you like these app please rate it with
Thanks You!
Best regards,
Dee