We Make Awesome Sh

SVG animations for page transitions

SVG animations are a relatively new thing to the world of the web. For those of you who don’t know, an SVG is a “Scalable Vector Graphic”. Basically, it’s an image comprised of vectors and coordinates meaning that when it scales, it scales perfectly and remains beautifully crisp. One of the other beauties with SVG is that you can modify some of the attributes with CSS.

Almost all of the graphic assets on the new WMAS site are SVGs, which means it’s easier to customise the colour of the graphics, as well as keep them super crisp at any resolution. Late last year we completed a project with Lenny Kravitz which used some SVG animation for some of the UI elements:

Whilst we were making the new WMAS site, we were trying to figure out a great user experience whilst navigating to separate pages. The style of the site is very scruffy chic; there are various scribbles all over the site. One day, I said to Rob, “I wonder… can we do a call SVG animation for the page transitions?”. Rob knocked up a simple scribble SVG, and I started to play around with it to see how it might be done.

Here you can see the SVG of the scribble:

Once we had the scribble, I started to play around with a couple of css attributes, stroke-dasharray & stroke-dashoffset

If I’m totally honest, I still can’t figure out exactly what the attributes “mean” as I just had to constantly tweak the numbers until I had the result that we wanted. If you can provide me with more info, please let me know on Twitter! But the general definitions of the attributes are (according to MDN):

stroke-dasharray

It's a list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.

stroke-dashoffset

The stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash.

Once we had the animation, the rest was easy; it was just a case of switching over the content, by using AJAX to fetch the new content, and using the History API to switch the URLs.

Go and check out the final result over on our new site by viewing more info on a specific project.

Let us know what you think in the comments below.

Recent Articles

comments powered by Disqus