Simple Code Blog

Three, Pt and more

September 03, 2020

Pure CSS


Yes! CSS allows animation of HTML elements without using JavaScript or Flash! An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want.

It's still the most performat and cross-platform/browser compatible way to animate website elements. The result is scalable, quick-loading, and well, impressive to see. Check out some more examples of neat pure CSS animations.


Three.js is an over 63K stars open-source 3D library for JavaScript that supports Canvas, SVG, and WebGL renderers. What does that mean? You can create interactive 3D animations right in the browser using WebGL in an intuitive way. First introduced at April 2010, the library is still being actively developed by nearly 1,000 contributors. Three’s homepage is at which includes examples, documentation, and a link to the Three.js GitHub repository where you can always download the latest package.


"A line is a dot that went for a walk.
Drawing is taking a line for a walk."
Paul Klee

This is what this whole experimental animation library all about. It starts with a simple point that creates a concept when put into space and transforms into interpretation when gets into a form. The space and the form in return create a context for a point. The code is being viewed as new medium: it can automate processes, model abstractions, and design interactions. All together Point, Space and Form orchestrated by Code create beautiful pictures on a canvas.


Alt Text

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovinand renders them natively.


If you are looking for some fine details such as svg drawing, scroll, hover, type animation check out this article with over 20 animation libraries overview. I borrowed a nice clean and simple github profile card design from there.

by Olena Ageyeva
Web Developer and Educator