React

32 Articles

Jun 21, 2023

Building a React Number Ticker

Animate Between Two Numbers with React hooks and CSS

• React
• CSS
• Animation

Apr 6, 2023

Highlighting Text on Scroll

Highlight text while scrolling through a container.

• React
• Framer Motion
• Animation

Jan 31, 2023

Building a React Confetti Component

Partying hard with React hooks, CSS and the js-confetti library.

• React
• CSS
• Animation

Oct 31, 2022

Scroll Animations with Framer Motion

In this series, you’ll learn how to create scroll animations in React using Framer Motion.

• React
• Framer Motion
• Animation

Oct 31, 2022

Scroll-Linked Content Reveal Animation

Learn how to create a scroll-linked animation with Framer Motion.

• React
• Framer Motion
• Animation

Jun 29, 2022

Animated Page Transitions in Next.js

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

• Framer Motion
• React
• Nextjs
• Animation

Apr 17, 2022

A Typing Text Effect with React Hooks

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

• React
• React Hooks

Mar 20, 2022

Building a Heatmap Chart Component

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

• React
• Data Visualization
• CSS Grid

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

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

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

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 3, 2020

Recreating the Medium Applause Button

Learn how to create the Medium applause button in React.

• React
• React Hooks
• CSS
• Animation

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