I always wanted to create a UI library, but my design skills, in short, didn't allow for it 😊 So I decided to create something as simple as possible. Smooth, short animations, whose code you can directly download and place on your site, this was my task.
Tech stack
I know I'm repeating myself, but yes, and this time I used TypeScript.
What am I used for animations? Short question, quick answer - GSAP is responsible for all functionality related to animations. Looping, delaying, resetting, I could go on and on.
All files with graphics are in .svg format so I can easily manipulate individual elements.
The whole app was builded and packed with Parcel, to reduce files' size and increase performance 💪
Problems
The biggest problem was to work out all the details related to the design of graphics and animation itself. A millisecond this way or that way? How about a pixel to the left? A little different easing? These are not as easy questions as you may think! Good animation must have everything down to the smallest detail.
On the code side, I can't mention too much, because there was no complicated logic here, and the styles themselves as well as the structure are very simple.
Lessons learned
I knew a lot about designing. Easings, colors, schemas, uff, how do you, designers deal with this?
I'd like to remind you that I learned about one of the most popular libraries for animation. I think this experience will pay off in the future.
Using Parcel allowed me to get acquainted with another tool useful for building websites.
All in all, I think the app came out pretty good and I got a lot out of it in terms of knowledge 💪
