Export SVG

First you need to create the artwork for you animation. You can create your vector graphic in illustrator and export as an SVG using the save as option. Go to File> Save As> SVG(svg) and click Save to open the SVG options dialog.


In SVG options, choose the settings you want, click SVG Code, and copy the code.


Getting Started With Snap.svg

First you need to download Snap.svg. Once downloaded, you will find the following in the folder:


After downloading Snap.svg, create an HTML file and reference "scripts/snap-min.js" somewhere in your file.


You're ready to place your svg code into the HTML file. Paste the svg code inside the body and give your svg an id.


Animate Along A Path With Snap.svg

Now that we have all of the elements needed, we can begin the animation. The first thing we need to do is find the path we want to animate on in our svg code.


This is what the code will look like:
flight_path = map.path ('M339.233,312.53c-37.779,16.943-119.567-21.598-134.165-71.924c-19.086-65.802,19.072-124.856,64.665-145.753s157.388-22.525,219.128,74.23s-20.242,229.959-114.73,240.688c-88.678,10.069-230.255-62.044-230.25-163.305').attr({ 'fill': 'none', 'stroke': '0'});

You have the code for your path, next you need to find out the length of the path. We can find out by using:

This is what the code will look like:
flight_path_length = Snap.path.getTotalLength(flight_path);

Snap.svg Animate Method

Snap.svg provides us with this animation method: Snap.animate (from, to, setter, duration, [easing], [callback]) Snap.svg runs generic animation of one number into another with a caring function


from is the starting point, since we want to start the animation from the start point of our path, we will make it 0.

to is equal to our path length, to is our end point.

setter is a function that will be called on every step of the animation. The setter function passes an integer parameter called step. This is used to calculate and animate our element position.

easing is the rate at which properties change.

callback is a function that launches when the animation ends. We can use this function to animate the spaceship when it reaches the end of the path.

We know the length of our path and what Snap.animate() is used for. Now we write the animation's function:


The final step is to work inside the setter function. The setter function uses the step parameter, which will be used to get a specific point on the path by using: Snap.path.getPointAtLength(flight_path,step), and send the spaceship to that point. This is what we end up with: