A hamburger menu is a classic UX feature present in countless websites. It works by showing and hiding a menu on click. It's especially popular in mobile design. In this tutorial, we'll create a hamburger menu in pure html, css and js.

( 24/02/2021 => full rewrite.)

Step 1: Adding a basic HTML

First, let's create a button with a class of ham and...

Easy hamburger menu with JS

The Intersection Observer (IO) detects when an element enters or leaves the viewport (or a parent element). It can be used to easily add animation on scroll without external libraries.

IO is asynchronous and much more performant than scroll listeners 👍.

Btw, if you learn better through videos, I highly suggest this youtube tutorial by Kewin Powe...

Introduction to scroll animations with Intersection Observer

The typing effect is a simple yet stylish animation used by many bloggers and web developers to introduce themselves in an elegant fashion.

This tutorial will show you how to create the typing effect with plain css and js (no libraries).

Let's start by creating a text holder p with a class of typeText.

We add a blinking cursor after our paragrap...

Simple typing effect with JS and CSS - Beginners

Scroll to top button is a very common UX feature in websites. It's goal is to prevent annoyance of users forced to scroll back up - especially on mobile devices. In this short tutorial, we'll see how to implement one with css and pure (vanilla) javascript.

The simplest way to get a scroll to top button is to have an html element at the top and a l...

Scroll to Top button for Beginners

So you want to animate with CSS? Great, let's get started 😄!

Most properties can be animated: width, color, opacity, transform, etc. In this tutorial, we are going to focus on transform.

With CSS transform we can rotate, scale, skew, or translate an html element.

Try hovering ( or clicking if you are on mobile) on the ninja images:

No animatio...

Introduction to CSS Animations

Introduction to GSAP animation

AOS is a very popular scroll animation library but it has some unexpected shortcomings with responsive design. Rellax is a rising star for parallax animations on desktop and mobile.

I wrote this short review after playing with both on a react website project.

AOS (Animate on Scroll)

AOS is an animation library that handles all the scroll logic.
...

#animation

Introduction to GSAP animation

Introduction to scroll animations with Intersection Observer

Review on Rellax (for parallax) and AOS (animate on scroll)

Introduction to CSS Animations