2 Simple and Cool HTML/CSS/Javascript Animations

Recently, I’ve been working on a project with two other brilliant developers, and my task largely had to do with styling the menus that a user would ultimately see and interact with.

A simple task, I thought at first. I’ll just use some cool library and expedite the process!

But there turned out to be far more involved than I initially pre-supposed.

Reading through the documentation of certain fancy libraries — like Three.js, anime.js, and Bootstrap — I was overwhelmed. I had taken a course covering HTML and CSS nearly a decade ago, but had forgotten a lot of the intricacies and nuances. Rather than fumble around learning a new library, while still trying to wrap my head around styling and “design”, I felt more comfortable reviewing the fundamentals of CSS and learning exactly what’s going on ground-up.

In this post, I’ll go over a couple of different techniques one can implement to “spice up” their inner <div>’s, using basic HTML, CSS and Javascript.

1. Transition w/ Opacity

One easy solution is to set the initial opacity of whatever ‘window’, or <div>, that you’d like to animate to 0%. This will set it, and everything inside of it, to be invisible.

Below, we have 2 elements. An <h1>, and a <div>.

The <div> will be our target window that we want to animate. In this case, we’ll set its initial opacity to 0%, like so:

opacity: 0%;

Now, besides a couple of sizing rules for .box, we also write below it:

transition: 1s ease;

This rule basically says that for any transition that occurs for the <div>, make the duration of the change last 1 second, and ease specifies a transition effect with a slow start, fast middle, and slow ending. All in all, try to think about it “easing” into place. The duration can be any number, with or without decimal point, specifying the amount of seconds. Ease also has a few different properties, but for this example, we’ll use the “default” of ease.

The last, and final step, is to write just a couple of lines of Javascript. We place an event listener on our <h1> box, so we can have some sort of trigger to change our <div>'s class to include .change

This trigger could be anything. If a form is submitted, if a particular part of the window is clicked, or anything, really! The beauty, I find, of working closely with ‘vanilla’ HTML, CSS, and Javascript — rather than these abstracted frameworks — is that I understand better every little part of the program. If I want to learn shortcuts from here, they become much easier to navigate!

Coming back to the Javascript, we’ll first find the <h1> with good ol’ document.querySelector, add an event listener, and say on “click”, toggle the classList of <div> to also include class .change, like so:

hello.addEventListener(“click”, event => {
 box.classList.toggle(“change”)
})

The final product:

2. Transition w/ Position

Another technique that can be used with the transition rule is combining it with the target box’s positioning.

To animate a “new window” appearing onto the screen, first hide the window off of the screen’s visible area, placing it further above, below, or to the side of where one can still see the <div>.

We’ll use an almost-exact setup similar to the last example. The only difference is that we’ll leave opacity alone, or at 100%. Instead, we’ll set the <div>'s position to relative, and since we want to show the <div> box as coming from the left, we’ll set it’s right property to 150vh. (vh is commonly used to be more “adjustable” than px, resizing appropriately to whatever the user’s window is resized to)

position: relative;
right: 150vh;

The final product below:

And that’s it! Less than 30 lines of code, and we’ve managed to animate a window through two different but powerful means. Taking this further, almost any property can be transitioned through, meaning that a lot of interesting and wild animation is available to us with pure HTML, CSS and Javascript!

In the next post, we’ll talk about key animations, and a few other simple to use animations!

Happy coding everyone.