I like to move it move it

March 18, 2020

I just deployed the new website for Interesting By Design, my current entrepreneurial project and I have things to say about it. The development itself was pretty straightforward with only one major rework and a few months of delay because we were bad at prioritizing. As you would guess I did 99% of the code and I had a lot of fun doing it, although I would have liked to work with someone else just for the experience. One partner wrote the content, a friend helped us design the website and I made it work.

Now for the interesting part: I love animating things on a website. It's got all the usual good things of the web like linkability and portability because it's just a website but damn is it a tasty website. The original design was mostly static because making things move is hard so our designer friend just drew up some SVGs to put in sections but I wanted more. I wanted the website to show off what we could do, to vouch for our services even if we don't have a huge portfolio yet. All that animation work was made possible by Svelte, my favorite front end framework and the transition CSS property. Transition is amazing, it takes 90% of the complex work out of animations and allows you to make extremely declarative and performant interfaces. For instance take the following tow buttons:

The only difference between them is that the second has the CSS transition: background-color 0.5s ease-in-out applied to it. This one line makes it so much smoother and easier on the eyes in my opinion, it just makes the whole website look better even if you didn't notice it consciously. The same effect would be possible to make with keyframes but significantly more involved. Other properties you can animate easily for great profit are opacity, any kind of CSS transform, anything with a color and more!

Couple this power with a declarative reactive framework like Svelte and it become very easy to build jazzy animations that are easy to adapt to all kind of screens. I particularly love Svelte's <svelte:window bind:innerWidth={w} />. It does exactly what it says on the tin: it binds the width of the window (in px) to the variable named w so you can use it anywhere in your template or code and it will have the right value. Svelte can bind a whole bunch of properties like that, not only from the window object but from almost any element (notably you can get everything you can think of from the <video> element). If that doesn't sound cool to you it means you haven't suffered through the dark days of jQuery; if it does sound cool you can read more about it.

But enough fangirling over Svelte's DX, I got some feedback saying the website was almost too animated, that it was disorienting. I plaid guilty, that's a tradeoff I am willing to make to show off that we can make shiny things. I do feel a bit guilty about that however because nowaday we can detect if the user wants to see flashy animations or not through the prefers-reduced-motion media query and I could disable most of them according to user preference. I will probably end up implementing it because accessibilty is important and I like to do my job properly. There are other problems with the website but as we all know, a project is never finished.