Ryan Mulligan

@ryanmulligan.dev

2524 Followers 230 Following

Passenger through space and time, front-end web builder & bittersweet songs enthusiast. CSS is always on my mind. he/him 🫣 https://ryanmulligan.dev

A screencast shows a simple webpage being scrolled. Elements sticky-stack effortlessly using CSS sticky positioning and a dash of JS to calculate height changes of the previous sticky element
A mouse arrow turns into the "magnifying glass cursor with plus sign" as it hovers an image of a vinyl record in a two-column grid. On click, the image transitions from it's location to the center of the screen as a translucent blue fades in behind it. On a subsequent click, the blue background fades out and the image smoothly transitions back to its original position.
My father-in-law's handwriting converted into an animated SVG. The text "good design:" animates from left to right as if being written by hand.
A bare, black and white, minimal interface has a pill-shaped label element floating in the top left corner as the page scrolls. The "2026" text written inside it changes to "2025" as it crosses a dashed border of a related section. That section has "2025" written just below the border. The page then scrolls fast to show how the floating label year text transitions to reflect the current visible section.
Screenshot of a browser chrome. The url bar contains a hyperlink starting with http://. The text within the browser viewport says, "This one shows http:// because eww, gross."
A matching game interface. 12 squircle-style boxes are presented in a 4 by 3 grid. Each box contains an emoji face, some already revealed from being matched while others hide behind emoji disguises like an ogre, clown, and pumpkin. The mouse cursor clicks around to finish matching the other faces. Once complete, large gothic text fades in that declares, "Unmasked!" The text fades out and the emojis begin jumping up and down to celebrate.
An interface displays a salmon-colored dashed-outlined box. Inside, a square blue box with a smile emoji in its center rests at the top left corner. A mouse cursor hovers over the salmon box, clicks and holds. The blue box smoothly transitions to the opposite corner of the container while the emoji switches to having heart eyes. Controls below the area change the transition axis and dimensions of the blue box to demonstrate how it always transitions exactly to the other side.
CodePen chrome displays code blocks on left and the rendered page with examples of the issue on the right. SVG arrow icons sit beneath their sibling text strings on page load. The page gets resized and the icon positions are fixed, aligning next to their respective text strings. The page is reloaded to display the issue again. This time, each link and button are focused using the keyboard. Arrow icons inside anchor links realign as expected. The button icon does not.
A screenshot from the Game Boy Pokemon game, character holding a ball with a text prompt that says "Wild 11ty idea appeared!"
Blurred color blobs wobble and dance around in a circular fashion, flowing through one another, generating lava lamp-like movement
A mouse cursor swings into the frame. At the center of the screen is a chainlink icon with "Permalink" text beside it. The mouse cursor turns into a hand pointer. Suddenly, "Permalink" transitions into "Copied!" and the chainlink icon morphs into a check icon. After a couple seconds, everything reverts back to its original state.
There is "Sort by" text with a light gray border to the right followed by an icon containing four evenly spaced horizontal lines that gradually get shorter from top to bottom. Directly next to these lines is a down arrow. When the icon animates, the line widths transition, now becoming shorter from bottom to top. Concurrently, the arrow flips and has a tiny bit of spring easing as it transitions into the opposite vertical direction. This repeats back and forth to showcase the animation.
Screenshot of CodePen UI with code on the left and preview pane on the right. The preview pane showcases an open modal with a translucent blue backdrop and a dog photo inside. On the right side of the modal, there is an empty light gray scrollbar gutter
A mouse cursor clicks around a two-column grid of dog images. Clicking an image transitions it gracefully into a modal, enlarging the image and moving it to the middle of the viewport. A translucent blue backdrop fades in behind it. When the image is clicked again, the backdrop fades out and the image moves back to its original position.
Two illustrations with light strokes are stacked on a dark background: The top contains 6 horizontal lines (imagine guitar strings) while the bottom contains 12 lines rotated in a circle, creating an asterisk-style shape. Off screen, a mouse is being scrolled up and down. This causes the lines to vibrate like sine waveforms. The velocity of the scroll causes higher amplitudes and faster wave drifts in either direction.
A pink, blue, and green box appear in a row. Each has slightly rounded corners and contains a white asterisk in the center. There is some space between the boxes. Animations slightly stagger from the left where the boxes pop up into the air, do a quick flip, then drop back down. Each has a jelly-like wobble as it hits the ground. As each hits, its asterisk in jumps out, then falls back down to create the same wobble.
A flat, simple-shaped pine tree illustration created with CSS. The tree is four green triangles tall, has a yellow asterisk-style star on top and a brown trunk at the bottom. Each shape dances slightly from a stop-motion-style step animation
A row of four cards is aligned to the center of the screen. The background is dark. Each card has a dark gray border and centers a simple gray icon inside it—the icons represent layout, code, command, and dropper but don't have any meaning for this demo. A mouse cursor appears, hovering each card from left to right. As a card is hovered, tiny pixels stagger appear from its center and spread to its edges. Each pixel animates at a random speed to create a shimmer effect.
A puppy sits proudly facing the camera. He has fluffy, wavy golden fur with a white strip going down his front. White fur surrounds his button nose. It looks like he's smiling for the photo, his mouth open slightly, tongue showing.