My face with a Photoshop cutout filter applied to it

KATRINEMARIE.ME

Welcome. Click on an image below to read about the given project.

Back to homepage

Dark Side of the SVG

21. August 2015

See the Pen The Dark Side of the SVG by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

The result of listening to Pink Floyd while testing VelocityJS on SVG elements.

For a long time, VelocityJS was on my list of things I wanted to try out but didn't have the time to. Then, one day, I fell over some basic CodePen demos and played around, tweaking the code. It just so happened that, since it was so similar to the jQuery .animate() function, I caught on immediately. And I loved the fact that it was possible to use custom easing functions without extemsion plugins, which I am of course used to from CSS (and SMIL).

While I was playing around with it, I was listening to Pink Floyd (actually not the Dark Side of the Moon, but that's irrelevant), and then I came to think of the 'Dark Side of the Moon' cover art. The rest is history.

The most difficult part of this animation wasn't creating the animation itself, it was getting the timing right. Afterwards I remembered that I could have saved myself some time if I had just used path.getTotalLength instead of calculating the length myself - but by then it was too late of course.

Irregardless, I spent a long time testing and tweaking values and testing again. I wanted the line-drawing animation to move at the same speed everywhere, which was a time-consuming task because of the fact that the paths are of different length. But I think I ultimately managed quite well.

The custom easing came to good use when I reached the 'echo' of the rainbow light. 

All fun and games - it just so happened to turn into something neat and constructive.

Remake with GSAP

I would be lying to say that I was pleased with the result though. I wanted the light to loop, and Velocity is a neat little animation function, but it doesn't have a timeline, which was what I needed.

So ultimately, I redid the code with GSAP. In any case, Velocity isn't actively being maintained anymore, which is a real shame - but that's how it goes.

The result is that after the box and the prism has been drawn, the light and the rainbow continuously loops. That was the effect I wanted in the first place, so I'm fairly pleased. The GSAP timeline also saves me the effort of having to calculate delays, obviously, so it's an easier choice anyway.

Go GSAP! 

Back to homepage