Using SVG With Skrollr

SVG stands for Scalable Vector Graphics. We can use SVG to create simple or complex shapes as well as paths.

You can save an Illustrator file as SVG and use it as an image in your HTML or CSS. You can also open the SVG file in a text editor and copy the code and use that in your HTML. That's because SVG (as well as HTML) is based on XML.

We can use SVG in our skrollr animations as well.

Here's a guide on creating basic shapes.

Paths are a little bit too complicated to write by hand, so you can use an online editor to create a simple shape.

An online SVG optimizer will help you simplify the SVG code further.

The skrollr SVG animation works by animating the stroke-dahhoffset property for SVG. Here are a few posts showing what's going on with the animation. Keep in mind that while the post discusses using CSS animation, we're using skrollr to do that piece.

Here's a simple animated path that I created. Note that you seem to need some sort of element after the svg animation otherwise it won't animate.

If you want to move an image along a path, you have to get a little more complicated. The author of skrollr wrote a separate JavaScript file to do this (skrollr-path), but never go around to documenting how to use it. You can modify his example page slightly for your use.

Here is an example that I modified. I just have a simple image moving along the same path used in the Simple SVG Path Demo. View the source of the demo to see how it works.