Articles

Animated Page Transitions in Next.js

Animated Page Transitions in Next.js

Use Framer Motion to animate route changes in your Next.js project.

Building Dynamic Icons With CSS Animation

Building Dynamic Icons With CSS Animation

Use the power of CSS animations to add joy to your icons.

A Typing Text Effect with React Hooks

A Typing Text Effect with React Hooks

Build a hook that backspaces and types out an array of words.

Building a Heatmap Chart Component

Building a Heatmap Chart Component

Making a heatmap chart like those seen in Github or Google Analytics.

Adding Click Animations to Anything

Adding Click Animations to Anything

Use React hooks and CSS variables to add animation effects.

How to Build a Story Layout

How to Build a Story Layout

Create an image story layout like those seen in popular apps.

How to Build a Color Palette Component

How to Build a Color Palette Component

Animating with flexbox, using the Javascript Clipboard API and more.

Building a Segmented Control Component

Building a Segmented Control Component

Use React hooks and CSS variables to create an animated segmented control.

Building a Drawer Component With React Portals

Building a Drawer Component With React Portals

Learn how to build a flexible Drawer component.

How to Animate Mounting Content in React

How to Animate Mounting Content in React

Using React hooks to solve a common animation issue.

A 3D Hover Effect Using CSS Transforms

A 3D Hover Effect Using CSS Transforms

Creating a hover interaction with Javascript and CSS.

How to Build an Image Comparison Slider

How to Build an Image Comparison Slider

Using React hooks to build a before and after image comparison component.

Using Framer Motion For Complex Animations

Using Framer Motion For Complex Animations

Learn how to build staggered animation effects and more.

Bitcoin Price Tracking with React Query

Bitcoin Price Tracking with React Query

Use React Query and Victory Charts to plot real-time cryptocurrency data.

How to Listen for CSS Events in Javascript

How to Listen for CSS Events in Javascript

A guide to working with CSS animation and transition events.

Resizable Tables with React and CSS Grid

Resizable Tables with React and CSS Grid

Learn how to add resizing to your HTML tables.

Creating an Animated Counter Button

Creating an Animated Counter Button

A short guide to building an animated counter component with React hooks.

Building an Audio Player With React Hooks

Building an Audio Player With React Hooks

Discover how to build an audio player using React and the HTMLAudioElement interface.

Reducing Motion in Animations

Reducing Motion in Animations

Learn how to implement accessible animations in CSS and Javascript.

Animated Tabs With Framer Motion

Animated Tabs With Framer Motion

Get acquainted with Framer Motion by building an animated tab component.

Building a Dark Mode Theme Toggle

Building a Dark Mode Theme Toggle

Learn how to build an interesting dark mode animation.

How to Build an Expandable Comment Box

How to Build an Expandable Comment Box

Recreating the Medium comment box from scratch using React Hooks.

CSS Text Effects - Five Minimal Examples

CSS Text Effects - Five Minimal Examples

Exploring lightweight CSS text clipping and masking effects.

Getting Started With Framer Motion

Getting Started With Framer Motion

An intro to the animation library from Framer.

Building a Vertical Carousel Component in React

Building a Vertical Carousel Component in React

We'll learn how to build an infinite carousel using sentences as slides.

The Importance of Having a Side Project

The Importance of Having a Side Project

And the benefits of learning by building things.

Recreating the Medium Applause Button

Recreating the Medium Applause Button

Learn how to create the Medium applause button in React.

Automating Your Workflow With Code Snippets

Automating Your Workflow With Code Snippets

Find out how using code snippets can help you speed up common tasks.

Flexbox Bottom Aligned Elements

Flexbox Bottom Aligned Elements

We'll cover two ways of bottom aligning an anchor within a flexbox item.

How to Lazy Load React Components

How to Lazy Load React Components

We'll discover how to use React Lazy, React Suspense, and the Intersection Observer API to load content only when needed.

Building a React Card Carousel Component

Building a React Card Carousel Component

In this post we will explore creating a card carousel like the one seen on Stripe.com.

Making Progress With Progress Indicators: Part 2

Making Progress With Progress Indicators: Part 2

Part two on building progress indicators. This time, using SVG animation.

Making Progress With Progress Indicators: Part 1

Making Progress With Progress Indicators: Part 1

The first of a two part series exploring stepped progress indicators.

Building a Dropdown Menu Component With React Hooks

Building a Dropdown Menu Component With React Hooks

We'll create a dropdown menu using React Hooks.

How to Build a Skeleton Loading Placeholder

How to Build a Skeleton Loading Placeholder

Explore some basic strategies for creating skeleton loading placeholders.

Recreating the iOS Control Center With CSS Grid

Recreating the iOS Control Center With CSS Grid

We'll create a clone of the iOS 13 control center layout using the power of CSS grid!