react

A collection of 32 posts

Animated Social Share Links

Learn how to build an animation for displaying social links using CSS

Building a React Number Ticker

Animate Between Two Numbers with React hooks and CSS

Highlighting Text on Scroll

Highlight text while scrolling through a container.

Building a React Confetti Component

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

Scroll-Linked Content Reveal Animation

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

Animated Page Transitions in Next.js

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

A Typing Text Effect with React Hooks

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

Building a Heatmap Chart Component

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

Adding Click Animations to Anything

Use React hooks and CSS variables to add animation effects.

How to Build a Story Layout

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

How to Build a Color Palette Component

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

Building a Segmented Control Component

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

Building a Drawer Component With React Portals

Learn how to build a flexible Drawer component.

How to Animate Mounting Content in React

Using React hooks to solve a common animation issue.

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

Learn how to build staggered animation effects and more.

Bitcoin Price Tracking with React Query

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

Resizable Tables with React and CSS Grid

Learn how to add resizing to your HTML tables.

Creating an Animated Counter Button

A short guide to building an animated counter component 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

Learn how to implement accessible animations in CSS and Javascript.

Animated Tabs With Framer Motion

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

Building a Dark Mode Theme Toggle

Learn how to build an interesting dark mode animation.

How to Build an Expandable Comment Box

Recreating the Medium comment box from scratch using React Hooks.

Getting Started With Framer Motion

An intro to the animation library from Framer.