guest@classicwfl.com:~$ ls -R ~/

./home:

./articles:

./videos:

./photography:

./art-portfolio:

./music:

./merch:

Website Redesign: (Animated) Cloud-Filled Mind

Categories:

Date: 07/04/2017

It wasn’t much long ago I redesigned this site with some experimental UI & animation. It was fun, it was interesting.

It was also unusable by a good swath of visitors.

How do I know that? Not many people made it past the splash page, according to my analytics.

I had hoped that the twin spinning ball animation would be enough to trigger a sort of clue to users as to where they should click. It wasn’t that clear for most, so I learned something from the experiment.

This time I went much more traditional as far as clickthroughs, but also created some interesting visuals. I revisited my early techniques in photo manipulation, and studied a new javascript library (anime.js) to create animated clouds that blend in very well with the design.

My bio about page bio also exposes myself a little more than I have in the past, as a person. If you haven’t read it yet, go figure out for yourself if I’m crazy.

Anime.js is an interesting library. In the past I’ve used Velocity.js, but I am finding myself preferring anime.js for more detailed, or more minutely controlled animation. Studying the library yields interesting results, such as animating along a path and more. I believe it’ll give me much more options in the creation of web-first digital art.

Issues encountered are the same old song and dance when animating SVG; there is no way to control the z-index of an SVG element, performance can be sketchy with the filters on slower/mobile devices, and then, of course, browser quirks (this time only occurring on Firefox, which was a simple enough fix with a little extra CSS).

That is all I have for you. Enjoy the new website, and go watch the cloud animation if you’re as strange as I am and need to relax. View it on codepen.io!