I have recently discovered GSAP, an amazing package then enables the implementation of seamless animation on the web. I wish I had discovered this earlier! I have been diving deeper lately into libraries for doing 2D and 3D animation on the web lately. GSAP is a powerful one that enables you to animate HTML and CSS in simple and powerful ways. At the time of writing this I am still a beginner but I have been able to catch on relatively fast. Another library I found was three.js, which allows one to render 3D models on the browser (at the time of writing this I am planning to do a post on three.js in the future).

If you are reading this you have probably noticed that this website has non-trivial animations. For example, there are elements that, when hovered over, will grow in scale and move in the direction of the cursor. This is done with GSAP! I use GSAP's to() function to move the position of an HTML element and scale it.

GSAP has 3 core function that allow for creating custom animations: to(), from(), and fromTo(). The first allow you to reference an HTML element and move it to state (from the current state). The different states can involve size, scale, opacity, and more. The from() function allows one to animate an element from some state to the element's current state, and the final function allows one to animate from some state to some other state. An example use case is when some component mounts, you can trigger some number of animations to occur; this is what happens in this website: when different pages load, elements swipe in from the sides of the screen. GSAP also provides a simple timeline feature that allows one to trigger animations in a row at specified times, and allows for loops and yoyoing.

Click on the shapes below to visualize the functions:

While the animations above could be done with pure CSS, GSAP provides an intuitive API. For example, a powerful property you can apply is Easing. Basically, there are different easing types that make animations smoother. For example you can apply a bounce ease to a movement, or an ease with a nice curve that starts fast and ends slow.

GSAP provides some plugins for doing clean animations quickly. An example is one is ScrambleText; you may have seen this one used in this site (e.g., the front page of the Blog). By tweaking the scrambled text, duration, and easing, this can be a very cool effect. Here is an example:

So yeah! Give GSAP a try! It is totally free and there are a ton of examples. It should work with any JavaScript based UI. It is very simple to install with NPM, other package managers, or a CDN. The source code for my website is open, so feel free to check out how I implemented my animations!

- Marcus, Nov. 30th, 2025

(P.S., Go to the home page and try click on the coffee gif... 👀 ☕️)