Web Animations, CSS Animations, HTML Canvas, GreenSock GSAP, JavaScript

Exploring Animations for Websites

7 min readMar 22, 2022

Animation, no matter how exciting it looks, is a technical and time-consuming game. So if you are a designer, a developer, or an inquisitive learner, this article might help you gain some insights into the world of animations for the web.

Firstly, designing for the web is different from designing for print. The file size has to be taken into account. Because a little increase of a few megabytes here and there can increase the user’s loading time drastically. Hence, we cannot create animations in a program then export them as videos on our websites. Don’t get me wrong, you can upload a video on your website but that is not considered a web animation. Web animation is a pixel-perfect and lightweight piece of art that can morph into different styles based on your interactions.

A screenshot of Syed’s portfolio website — Portfolio animation by **Syed**

Here’s a link to my final animation piece made for my portfolio:
https://sai-yed.com/WebAnimation

Can you guess the file size of all my code and assets altogether? Well, to my amazement, it is less than 30 KBs.

Let’s give this file size a perspective. A usual selfie that you take from your phone’s camera sizes at least around 2 MBs. Well, the above animation is 0.02% of the usual picture size. That is why it is quite appropriate for the web. Hence, you’re seeing a lot of magic in exceptionally small file sizes.

Now, does a small file size equal less effort? Well, not exactly.
In fact, this basic animation is made up of more than 700 lines of code :)

But, why should we add animations?

If animations are relatively difficult to make, then why do we need them? Because animations have the power to:

Add personality to your website
Enhance the overall design
Increase engagement
And, invoke a two-way communication

Websites can give a static feeling due to the way they are designed which might result in a dull experience. Interactions, however, add a two-way communication. The user does something and the webpage responds. This is where animations play a strong role as we can program them to come to life when interacted with.

Even though animations are a good feature, adding them excessively and carelessly might become a problem. It can make the user experience overly interactive and inaccessible for people with disabilities. There are times when too much animation slows down the user’s operating system.

What was my goal?

My skillset is explicitly inclined towards Web Design and Development. Specifically, towards User Experience Design and Front-End Development. Therefore, it was befitting for me to take up such a challenge and additionally, add it as a project on my portfolio page.

The main idea was to create an animation package for my portfolio based on my skillset.

How did I make it work?

The available options on my end were either to use CSS (Cascading Style Sheet) Animations, which are super powerful. Or to use the HTML Canvas element which primarily needs JavaScript manipulation.

The power of CSS Animations is its simplicity and similarity to any other animation program. We can use the TRAPS properties (transform, rotate, anchor point, position, and scale) with the use of keyframes.

HTML Canvas, on the other hand, is a math-driven drawing platform, we can draw almost anything as long as we know the math required to do it. Canvas can also incorporate images but they can easily lose quality. Even basic shapes like circles need some math to be drawn on the screen.

My animation plan had three parts; the primary animation based on scroll, a logo animation of my brand, and an added animation to enhance the look. The main animation consisted of mountains that animate in and out based on scroll while text animations focus on my skillset.

Screenshot of Syed’s main animation — Main animation

The second animation was planned to have a starfield filled with random stars here and there, while a shooting star shows up every few seconds.

Screenshot of the websites background animation having shooting stars. — Shooting Stars — Background animation

And the last animation was a simple animate in effect on my logo whenever the page is loaded or reloaded.

The need for SVGs

Scalable Vector Graphics are images that can be translated into code. They are based on vectors instead of pixels and are scaleable, as in, we can increase their size without losing quality. Because they have vector information saved in code, they can easily adapt to different sizes while staying razor-sharp. The great news is that we don’t have to type in that code, rather use a design program like Adobe XD or Figma to make them and export them into our code. Besides, I was not going to figure out all the math to draw the mountain paths, thus, I used SVGs.

Photo of shapes by Parsoa Khorsand on Unsplash

Starting from an SVG, the logo animation was simple to execute. Whenever the page loads, the logo flies in from right to left and fits into its place using CSS properties and keyframes. The starfield is quite different because it uses Canvas to draw random moving circles on load. A random circle then shoots from somewhere within 80% of the screen width, either to the right or to the left at certain angles, giving it a look of a shooting star. For this, I used a pre-written code on CodePen and then manipulated it to my requirements. Even though I could’ve written the code myself, in order to save time and effort and focus on the main animation, I didn’t mind going this route this time. The link and credits are in the description.

Tools used for the animation

Figma
SVG OMG (to optimize exported SVGs)
Coolors.co
CodePen
CSS Animations
HTML Canvas with vanilla JavaScript
GreenSock Animation Library (GSAP)
GSAP ScrollTrigger plugin

I did not use Canvas for my primary animation

Despite initially planning to use canvas for the purpose, I soon figured out that another JavaScript library will be ideal for my purpose. GreenSock or GSAP library makes SVG animations look seamless. It has added plugins like ScrollTrigger which smooths out the animation interaction based on the user’s scroll. It also allows us to use timelines to build an animation stack. Other plugins like MorphSVG help morph one shape into another which can give a look of animating individual anchor points of a path. Overall, GSAP is an ideal solution for web animations.

GSAP or GreenSock JS Animation Library

Let’s summarize my process

illustration of the creative process — The creative process

The first thing I did was to go to do some research on the web and seek inspiration in order to anticipate what is achievable and befitting.
The I went through the available courses related to the required technology.
Next, I sketched out my idea on paper.
Designed my assets and mockups on Figma.
Coded components one by one, starting from my main animation to the secondary ones.
Tested the components or individual animations.
Placed all the components on top of one another using the CSS position property.
Tested again and deployed the code on my website.

My Take

Coding animations and drawings is a slow and frustrating process. For example, HTML Canvas uses a lot of math for drawing basic shapes. Additionally, if you need to interact with those shapes, you can only do that by storing their drawing information in JavaScript objects. All of this operation makes it longer to achieve the end result. In my opinion, once you’re comfortable with vanilla JavaScript and coding in general, try to explore different libraries and frameworks out there that speed up your process. Besides, the whole point of using technology is to reduce human effort. So once you’re good with the fundamentals, it’s time to start becoming a pro.

Due to the above approach, I was able to get the components working in due time throughout the process. On top of adding more skills and another strong project to my front-end development portfolio, I learned a lot about myself. Most importantly, about my performance which is like an ease-out cubic bezier curve. It starts slow and speeds up at the end, ultimately, having the final product ready in time. It would be even nicer if I had an ease-in way of doing things. That would make me start working faster in the beginning and slow down by the end.