“Progressive Draw - SVG” Documentation by “DXC” v1.0

Progressive Draw - SVG

By: DXC (Lance Snider)
Email

Thanks so much for purchasing my item! If you have any questions, please feel free to email via my user page contact form here.

Please note that to test this locally, you need a server. I like WAMP (for Windows) and MAMP (for Mac).

Tips for Preparing Your SVG Image In Illustrator

Modern browsers and Adobe Illustrator do a great job of handling SVG's, but there are still some tricks you need to follow to make sure your image works properly in Progressive Draw - SVG.

Always Work from the .AI file
You can finally open .svg files in Illustrator CC, but don't do it! If you ever want to change your artwork, edit the .ai file and save it as an .svg. Why? Because Illustrator handles images in a much different way than .svg code. The more you jump from one to the other, the more things get messy. For example, the artboard location will change, centered text will become left aligned, and ID's will be renamed. To save from an .ai file to an .svg:
1. Open your .ai file in Illustrator
2. Click File>Save As
3. Set the Format to SVG
4. Name your SVG (you'll use this later) and click Save
5. If you plan to make more edits to the artwork, close the SVG file and open your .ai file again!
6. Save your SVG into the "images" folder
Group Your Artwork
Before you save your artwork as an .svg, make sure you put it in a group. To do this, just open it in Illustrator, select everything and click Object>Group. Your Layers panel should look something like this:
Ignore Elements
If you don't want to animate a particular design element (ex: you want the background to be visible on start), just double click it to enter isolation mode, go to your Layers panel, and rename it to "ignore".
Variable Stroke Widths
You can't use variable-width strokes in SVG, but you do have other options. First, you can convert all your paths to a set width. You can also convert all your paths to fills (Object>Path>Outline Stroke), though Progressive Draw - SVG will animate them as solid objects, not lines.
Raster Effects Some raster effects, like drop shadow, work pretty well with SVG's, but I wouldn't recommend using them with Progressive Draw - SVG. Progressive Draw - SVG only recognizes vector elements.
Don't Change Your Artboard Size
For some reason, your .svg will get all screwed up if you change your artboard size or position in Illustrator. If you really need to change the artboard size, just create a new Illustrator file that's the correct size, and copy your artwork over.
Your SVG images may cache
If you test your animation, modify the image, and test it again, you may see the old version without your recent edits. This is because the SVG is cached. To get around this, you may need to clear your browser cache after each modification.

Setting Up Your HTML

Open the HTML file where you'd like to put the .svg image and add the following code to the <head>:

<link rel="stylesheet" type="text/css" href="css/lines.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="dist/snap.svg-min.js" type="text/javascript"></script>
<script src="js/snapLines.js" type="text/javascript"></script>

If you want your animations to start when you scroll to them, add this just under the previous code that you added:
```
<script src="js/noframework.waypoints.min.js"></script>
					
```

Add the following code in the <body> (the div is optional)

<div class="svgHolder">
	<svg class="dxcLines yourArtwork" width="100%" viewBox="0 0 590 590"></svg>
</div>

Change where it says "yourArtwork" to whatever you named your .svg file. For example, if your artwork was named fish.svg, your code would look like this:
```
<div class="svgHolder">
	<svg class="dxcLines fish" width="100%" viewBox="0 0 590 590"></svg>
</div>
```
Where it says "590 590", you need to change that to the dimensions of your artwork in Illustrator (not the size you want it on the page). If you don't know what this is, open your artwork in Illustrator, click the Artboards button,

then look where it says "W:" and "H:" in the top, right corner.

If your artwork in Illustrator is 900px wide by 340px tall, your code would look like this:
```
<div class="svgHolder">
	<svg class="dxcLines fish" width="100%" viewBox="0 0 900 340"></svg>
</div>
```

Modifying Animation Parameters (Optional)

It's easy to add parameters so you can better control your animation.

Open your .html file.
In between your <svg> tags, add parameters like this:
```
<div class="svgHolder">
	<svg class="dxcLines fish" width="100%" viewBox="0 0 900 340">
		<param 
			animationtime="0.6" 
			drawFillsOnComplete="false" 
			animateFillTime=".1"
			defaultStroke="#fff"
			progressiveDrawing="true"
			delayBetweenSVGs="2"
			animateOnPageLoad="true"
			animateOnScroll="true"
			useMenu="true"
		 ></param>
	</svg>
</div>
```
Here's what each of these does:
- animationtime - Default: 1
  Larger numbers make the animation go faster
- progressiveDrawing - Default: true
  When set to false, all objects draw at the same time. When set to true, they wait for the last one to finish.
- delayBetweenSVGs - Default: .5 seconds
  If you have multiple .svg's on the page, it will wait between each one.
- drawFillsOnComplete - Default: true
  Wait for all the strokes before the fills fade in. When set to false, the fills animate in as soon as the assosiated stroke is done drawing.
- animateFillTime - Default: 1 second
  The time it takes for the fills to animate in
- animateOnPageLoad - Default: true
  When set to false, nothing will happen unless the user clicks play.
- defaultStroke - Default: #000000
  If a fill doesn't have a stroke, it will be given one temporarily so that it's outline can be drawn. This is the stroke color.
- animateOnScroll - default: false
  Instead of auto-playing or having to click the play button, the animation starts as soon as it's visible on the screen.
- useMenu - default: true
  Determines whether there's a play/pause button on hover.

Adding external controls

You may want to control your animation from outside Progressive Draw - SVG. Doing so is simple. For example, let's look at how you'd create a custom play button. Here's the play function.

PlaySVGs([0])

This will play the first animation on your page. Let's say you had several animations on your page and you wanted to play the first and third, you'd just add another index into the array:

PlaySVGs([0, 2]);

If you wanted to put this function on a button, this is what it would look like:

<button onclick="PlaySVGs([0, 2])">Play First and Third</button>

Here are all of the functions:

PlaySVGs([0]) - plays the animation
PauseSVGs([0]) - pauses the animation
ReverseSVGs([0]) - reverses the animation
ResumeSVGs([0]) - resumes whatever was happening before pause, even if it was reversed
RestartSVGs([0]) - restarts the animation

Upload Your Files

Log into your hosting space via FTP software (I recommend Transmit).
Upload the files to your server.

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 theme. I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Lance Snider