Introduction to GSAP animation

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

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

Web development

For Web Developers at the start of their journey, curious about design.

Top 5 design mistakes web developers make (and how to avoid them).

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

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

Design

For dev bloggers looking to grow an audience.

How to create a newsletter with Mailchimp (not affiliated/ad).

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.
...

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

I put together this short tutorial on how to make a hamburger menu with no js in response to the feedback on my original Twitter post.

The trick is to use the CSS pseudo-class :target. I'm not the one who came up with that technique - saw it on stackOverflow or elsewhere.

Anyway, enjoy 😁!

:target

Have you heard of the CSS pseudo-class on :targ...

Hamburger menu with no JS - Beginners

Handling files is a pro feature in Codepen. Free users can't add local files like images to use them in the editor.

In this quick 3 steps tutorial, we'll learn to host an image on Github Pages and use it in Codepen.

Step 1: Upload an image to a new repository.

Click on the + button (top right) then New repository

Add a repository name (I've cal...

Introduction to GSAP animation

Top 5 design mistakes web developers make (and how to avoid them).

Easy hamburger menu with JS

Introduction to scroll animations with Intersection Observer

Scroll to Top button for Beginners

Top 5 design mistakes web developers make (and how to avoid them).

Introduction to scroll animations with Intersection Observer

Easy hamburger menu with JS

Scroll to Top button for Beginners

Web Development

Introduction to GSAP animation

Easy hamburger menu with JS

Introduction to scroll animations with Intersection Observer

Introduction to CSS Animations

Design

Top 5 design mistakes web developers make (and how to avoid them).

Scroll to Top button for Beginners

Simple typing effect with JS and CSS - Beginners

Insights

How to create a newsletter with Mailchimp (not affiliated/ad).

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

Hamburger menu with no JS - Beginners

A quick hack to use local images in Codepen