Articles

Jan 26, 2022

Adding Click Animations to Anything

Use React hooks and CSS variables to add animation effects.

• React
• Animation
• CSS Variables

Dec 8, 2021

How to Build a Story Layout

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

• React
• CSS
• Javascript

Oct 18, 2021

How to Build a Color Palette Component

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

• React
• Javascript
• CSS

Sep 8, 2021

Building a Segmented Control Component

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

• React
• React Hooks
• CSS

Aug 7, 2021

Building a Drawer Component With React Portals

Learn how to build a flexible Drawer component.

• React
• React Hooks
• Javascript

Jul 26, 2021

How to Animate Mounting Content in React

Using React hooks to solve a common animation issue.

• React
• React Hooks

Jun 20, 2021

A 3D Hover Effect Using CSS Transforms

Creating a hover interaction with Javascript and CSS.

• CSS
• CSS Animation
• Javascript

May 27, 2021

How to Build an Image Comparison Slider

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

• React
• CSS
• Javascript

May 2, 2021

Using Framer Motion For Complex Animations

Learn how to build staggered animation effects and more.

• Framer Motion
• React
• Animation

Apr 5, 2021

Bitcoin Price Tracking with React Query

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

• React
• Data Visualization

Mar 7, 2021

How to Listen for CSS Events in Javascript

A guide to working with CSS animation and transition events.

• CSS
• CSS Animation
• Javascript

Feb 20, 2021

Resizable Tables with React and CSS Grid

Learn how to add resizing to your HTML tables.

• React
• CSS

Jan 31, 2021

Creating an Animated Counter Button

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

• CSS
• Animation
• React

Jan 14, 2021

Building an Audio Player With React Hooks

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

• Javascript
• React

Dec 20, 2020

Reducing Motion in Animations

Learn how to implement accessible animations in CSS and Javascript.

• Accessibility
• CSS
• Javascript
• React

Dec 5, 2020

Animated Tabs With Framer Motion

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

• React
• Framer Motion
• Animation

Nov 15, 2020

Building a Dark Mode Theme Toggle

Learn how to build an interesting dark mode animation.

• React
• CSS
• CSS Variables
• Javascript

Nov 1, 2020

How to Build an Expandable Comment Box

Recreating the Medium comment box from scratch using React Hooks.

• React
• React Hooks
• CSS

Oct 4, 2020

CSS Text Effects - Five Minimal Examples

Exploring lightweight CSS text clipping and masking effects.

• CSS

Sep 21, 2020

Getting Started With Framer Motion

An intro to the animation library from Framer.

• React
• Framer Motion
• Animation

Sep 2, 2020

Building a Vertical Carousel Component in React

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

• React
• CSS
• Animation

Aug 16, 2020

The Importance of Having a Side Project

And the benefits of learning by building things.

• Career

Aug 3, 2020

Recreating the Medium Applause Button

Learn how to create the Medium applause button in React.

• React
• React Hooks
• CSS
• Animation

Jul 18, 2020

Automating Your Workflow With Code Snippets

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

• Tools

Jul 5, 2020

Flexbox Bottom Aligned Elements

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

• CSS

Jun 25, 2020

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.

• React
• React Hooks
• Javascript

Jun 10, 2020

Building a React Card Carousel Component

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

• React
• CSS

May 20, 2020

Making Progress With Progress Indicators: Part 2

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

• React
• SVG
• CSS
• Animation

May 15, 2020

Making Progress With Progress Indicators: Part 1

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

• React
• CSS
• CSS Variables

May 13, 2020

Building a Dropdown Menu Component With React Hooks

We'll create a dropdown menu using React Hooks.

• React
• React Hooks
• CSS

May 12, 2020

How to Build a Skeleton Loading Placeholder

Explore some basic strategies for creating skeleton loading placeholders.

• CSS
• HTML

May 9, 2020

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!

• CSS
• HTML