Posts
Strong opinions, loosely held.
useCounter hook with Framer Motion
How to use Framer Motion animate hook to create a count up/down effect when in view.
Transform header height on scroll with Framer Motion
How to make use of the useScroll hook from Framer Motion to change the height of a header element on scroll.
Animate to and from display none with Framer Motion
How to use onanimationend to animate to and from display none with Framer Motion.
Implementing Headroom.js with Framer Motion
Give your pages some headroom. Hide your header until you need it with Framer Motion.
use-wrapping-index
Useful React Hook for managing a wrapping index for an array of items.
How to animate a modal dialog component with Framer Motion
Learn how to animate a React Aria dialog component with Framer Motion
How to create an animated highlight with Framer Motion
Learn how to animate a React Aria dialog component with Framer Motion
Using focus-within to style input groups
How to style wrapping elements based on nested input focus state.
CSS grid and custom properties
How to create a flexible grid solution with custom properties.
How to create overlapping images with CSS Grid
Create an overlapping image effect with CSS Grid. No absolute positioning or negative margins needed!