Let's Build UI
A collection of 19 posts
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
Using Framer Motion For Complex Animations
Learn how to build staggered animation effects and more.
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.