By
Download Skrollr plugin
We start with the Skrollr.js plugin by Alexander Prinzhorn, available to download via github.com/Prinzhorn/skrollr and the ‘Download ZIP’ button. This will drive the scrolling part without requiring jQuery. In the archive you’ll find the necessary ‘skrollr.js’ file and some documentation and demos. You’ll find a relevant one for path animations like ours inside the repository’s ‘examples’ folder and the ‘path.html’ page.
Link the files
Create a new HTML page and attach the skrollr.js plugin file via a <script> tag. We’ve added jQuery as well here, purely to make it easier to call subsequent actions after the document has loaded – Skrollr doesn’t need it. Once the document has loaded we call skrollr.init() to run skrollr.js as follows:
001 <script type=”text/javascript” src=
”http://code.jquery.com/jquery-
2.0.1.min.js”></script>
002 <script type=”text/javascript” src=
”js/skrollr.js”></script>
003 <script type=”text/javascript”>
004 $(function(){
005 skrollr.init();
006 });
007 </script>
Draw the SVG path
This is where we design and plot our desired shape, preferably using a graphics editing suite such as Illustrator CS6. We then extract the SVG data and use <svg> and <path> tags in our page. In Illustrator we draw some curves using the Pen tool and go to Object>Artboards>Fit to Selected Art. After that we save it as an SVG file and open it within a code or text editor. You should see something similar to the following:
001 <svg version=”1.1” id=”layer” xmlns= ”http://www.w3.org/2000/svg” xmlns: xlink=”http://www.w3.org/1999/xlink ” x=”0px” 002 y=”0px” width=”359.814px” height =”159.813px” viewBox=”0 0 359. 814 159.813” enable-background= ”new 0 0 359.814 159.813” 003 xml:space=”preserve”> 004 <path fill=”none” stroke=”#ED003B” stroke-width=”4” stroke-linecap= ”round” stroke-linejoin=”round” stroke-miterlimit=”10” d=” 005 M2,2v46.512L48.512,2v46.512L95.023 ,2v46.512L141.535,2v46.512L188.047 ,2v46.512L234.559,2v46.512l45. 349-45.349 006 c0,0,0,32.558,0,76.744s17. 442,77.907,77.907,77.907”/> 007 </svg>
Scroll animation
From this SVG data we can set up our CSS classes for the <svg> tag using the width/height values from our graphic. For the path class we set desired styles for the line stroke, colour and width. Within the actual <svg> and <path> tags we then define our paths with the ‘data’ field, passing stroke-dashoffset:2000 when the scrollbar is at the page top and stroke-dashoffset:0 once the user has scrolled by 2,000 pixels. We then supply the ‘d’ string of path descriptions taken from our source graphic:
001 <style>
002 svg{
003 width:359.814px;
004 height:159.813px;
005 }
006 path{
007 stroke-dasharray:2000;
008 fill:none;
009 stroke:#fff;
010 stroke-width:4;
011 }
012 </style>
013 <svg>
014 <path data-0=”stroke-dashoffset
:2000;” data-2000=”stroke-
dashoffset:0;” d=”M2,2v46.512L48.
512,2v46.512L95.023,2v46.512L141.535
,2v46.512L188.047,2v46.512L234.559,
2v46.512l45.349-45.349 c0,0,0,32.558
,0,76.744s17.442,77.907,77.907,77.
907”/>
016 </svg>
More complex animations
This simplified animation can be made more dynamic or intricate by adding more SVG paths. So, for example, the following features 14 paths as opposed to just one. You can also opt for using a compound path for defining more complex shapes such as logos or typography. Check the full step code on the disc for links to the live examples online.
001 <style>
002 svg{
003 width:514px;
004 height:180px;
005 }
006 path{
007 stroke-dasharray:1400;
008 fill:none;
009 stroke-width:2;
010 stroke:#fff;
011 }
012 </style>
013 <svg>
014 <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset
:0;” d=”M44.872,106.965 c6.586-6
.586,19.427-17.357,19.427-17.357”/>
015 <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M29.872,72.607 c7.922,7.922,
19.428,17.356,19.428,17.356l-19.
428,17.354”/>
016 <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M14.872,107.32 c6.556-5.857
,19.428-17.355,19.428-17.355L14.
872,72.607”/>
017 <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M0.872,72.607 c6.365,5.688,
19.427,17.356,19.427,17.356L0.872,
107.32”/>
018 <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M470.299,71.644 c-5.729,5.
117-19.428,17.357-19.428,17.
357l19.43,17.355”/>
019 <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M485.301,106.356 C479.067,
100.122,465.872,89,465.872,89l19.
43-17.356”/>
020 <path data-0=”stroke-dashoffset:
1400;” data-2000=”stroke-dashoffset:
0;” d=”M499.299,71.644 c-9.004,
