animation

A collection of 23 posts

The View Transition API in 3 Examples

How to animate between pages using the View Transition API.

Fun with Custom Cursors

Two ways to change the default mouse cursor appearance.

Building a Dynamic Background Effect

How to create a randomized, animated icon background for any content section.

How to Animate Borders in CSS

Different approaches for animating CSS borders in 2024.

What is CSS Motion Path?

Animating elements along a custom path has never been easier!

How to Build a Card Flip Animation

Learn how to apply CSS transforms and animations to playing cards

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.

Building Dynamic Icons With CSS Animation

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

Adding Click Animations to Anything

Use React hooks and CSS variables to add animation effects.

A 3D Hover Effect Using CSS Transforms

Creating a hover interaction with Javascript and CSS.

Using Framer Motion For Complex Animations

Learn how to build staggered animation effects and more.

How to Listen for CSS Events in Javascript

A guide to working with CSS animation and transition events.

Creating an Animated Counter Button

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

Animated Tabs With Framer Motion

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

Getting Started With Framer Motion

An intro to the animation library from Framer.

Building a Vertical Carousel Component in React

Learn how to build an infinite carousel using sentences as slides.

Recreating the Medium Applause Button

Learn how to create the Medium applause button in React.

Making Progress With Progress Indicators: Part 2

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