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
  • documentation
  • for_upload

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>
The order of the declarations is important.
If you already use jQuery on your site please do not declare it again. Please don't forget to edit the 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.


Via HTML

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.

Via JavaScript

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.


Global (for individual file) SVG option

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.

Animation options for each SVG primitive

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.

"Various" animations

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".

"Masks" animations

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".

"Gaussian Blur" animation

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.

"Line Drawing" animation

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".

"Custom" animation

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.

"Morph" animation (from v1.1)

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 path tag. The value of the d attribute of this path represents a "rabbit" shape.

On the other side the value of data-elvnmorph contains data for "crow" shape.

So my script changes the d value from "rabbit" to "crow" if the direction of animation is "out". And it also can change from "crow" to "rabbit" when the direction is "in".

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".

"Along a Path" animation (from v1.6)

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".

  1. When you or your freelancer prepare(s) a vector illustration, try to give meaningful names to elements and groups which you want further animate. It will help you to find those elements in the Editor's tree with easy.
  2. If you use Adobe Illustrator for creation, please try to avoid using classes like ".st0, .st1, .st2, etc." in your ready SVG code. It might cause a conflict when you use more then one animated SVG on the same page.
    It will be better to use "Presentation attributes" option.
    To do that, save your SVG in Adobe Illustrator according the following: In "SVG Options" dialog box click "More Options". Look at "Advanced Options" section > CSS Properties. Set it to "Presentation Attributes". As a result all your styles will be set as attributes for every element like:
    <rect fill="..." stroke="..." stroke-width="..." opacity="..."></rect>
  3. 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.
  4. 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 groups.
  5. Try to avoid to apply animations for elements in defs. One exception is elements for use tags. But be carefully with use elements, sometimes they give unexpected results.
  6. Please remember that "morph" effect (added in v1.1) works only with path elements.
  7. Please be careful with global "loop" option (added in v1.4). Users don't like inappropriate annoying effects.

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:

  1. Source tab. Here you paste your initial SVG code.
  2. Editor tab. Main tab with the Editor itself.
  3. Result tab. From there you can copy the resulting code with embedded animation options and paste it into your HTML code or a new SVG file.
  4. Global options settings.
  5. Animation options
  6. Buttons (from left to right): "Add animation", "Copy animation", "Paste animation", "Remove animation", "Play animation for current element", "Play all animations"
  7. The tree of your SVG document
  8. The work area
  9. Status bar
  10. Applied animation for selected element

Video Tutorial

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.



All versions of Internet Explorer from IE9+

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


Opera

drawLines effect doesn't work at all. Fallback to fade is provided for Opera.

FIXED from v1.3


Internet Explorer 9

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.

  • To jQuery team for outstanding work that makes our job easier.
  • To Dmitry Baranovskiy, the author of Snap.svg library
  • Ryan Van Etten the author of Verge script
  • Without these talented people this product could never be created. Thanks so much!

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