Why I created a custom transition library in the form of snippets

Like most people I know, I like (subtle) transitions and animations within websites. Which is why I want to go over why I created a custom transition library in the form of snippets, instead of creating a library. Or just using an existing library and call it a day. I wanted to build something which allows me to add transitions in the way I liked to do it myself.

Normal transition libraries

Most "normal" transition libraries are NPM packages. Which is great. Especially while using a lot of them. For example animate.css is a great library to add some animations to your website. The issue with libraries like these is that you have to go through the process of installing the library etc, even while using only one animation.

Transitions in the form of snippets

What I noticed over the last few years, is that I often want a transition within a website. But mostly I only need one or two specific ones. I always felt like adding a library for just this is a waste. Especially because I often like to finetune them.

This is why I decided to create a library in the form of snippets. All it is, is a list of transitions I use often which I can preview and copy. This way I only use what I acutally need and have the freedom to easily finetune it if required.

It started as a private git repo, but decided why not create a little UI around it and publish it on a subdomain of my personal site. It can be used at transitions.jellevanamersfoort.nl.

The benefits

After using my library for a while, I can say that the biggest benefit is speed. More specifically the speed of integrating them within my projects. Where I used to use libraries, or go back in old projects to find a transition I created. Now I can just view my library and copy the exact one I want. Basically just made it really simple for myself.

What's next?

At the time of writing this, I am quite happy with the library structure itself. It works exactly how I wanted it to. My next goal is adding more transitions within the library. This is something I will do over time whenever I come across somehing which misses within the library.

Please contact me if you have any transition requests.