Hey hey! Chris here. When I read an article (or part of it) and think it’s interesting, I’ll often save it for sharing later. Because, well, that’s one of the things I do around here! (At the moment I like using the Notion Web Clipper) My goal in doing that is to provide additional thoughts, context, and commentary based on my own experience, so it’s not just a link-dump, but hopefully something more useful than that. I’ve got a good number of interesting links saved up right now, so please allow me to take this opportunity to unload!

Pausing a GIF with details/summary

This is the neatest trick I’ve seen in some time. In this demo, Steve Faulkner creates a way to effectively pause a gif by wrapping the image in <details>/<summary> and positioning those elements on top of an image, like this:

This isn’t the demo, it’s just a (very meta) GIF demonstration.

Chris then went ahead and made another version in which he replaced the GIF with the images so that the animation is paused by default. And also that GIF is lazy loaded in, which could potentially be much better for performance.

The details and summary elements are designed to let you show/hide content like an accordion but this sort of demo makes me feel like this is the new checkbox hack, where a relatively simple bit of HTML can do a ton of outlandish and bizarre things.

[Robin]: This week I realized that I wasn’t solving a design problem at the right level. Here’s the scene: I found myself sat my desk, struggling to add some new features to this one page. Yet there’s so many directions that we could take this design! We could do this thing on hover, or when you a click an icon, or when you do x, y, and z. This feature started to haunt me. It felt like I was no longer sweating the details in Figma and moving the pixels around, but the pixels were beginning to move me around, the details sweating me.

My designs fell apart as I realized I had no idea what I was doing.

I needed to change my approach. I closed my designs in Figma and moved into the browser. I needed to prototype this idea in a more realistic environment. I relearn this again and again. Sometimes a prototype is the only way you can convince yourself that an idea is terrible or that an idea is the most fantastic thing you’ve ever thought of before.

This particular design I was working on was based entirely on hover states and as soon as I cobbled the prototype together I realized I’d made a terrible mistake. This design wouldn’t work at all, it just doesn’t feel right and no visual design or mockup could show me that in Figma. Because visually things looked just fine.

Sometimes we need to move around a bit when designing interfaces. We need to take things from a static environment into a dynamic one to see how realistic they are. Most of the time we probably don’t need a complex prototyping environment to figure out this one tiny problem, but sometimes we absolutely do. It’s the only way to see if this darn thing will work.

A reminder to myself: sometimes the feeling of a design is far more important than visuals alone.

[Robin]: I found this psychedelic TikTok where an artist overlaps a collection of words on top of each other and then rotates them around the center, creating this extremely cool effect:

Whoa, right? I wanted to try and replicate this effect in the browser. To begin, I switched on the Haml language in CodePen since it handles loops and I knew I’d need hundreds of copies of the same line of text. I started with a really high number, like 120, then kept incrementing it later until I found the effect I was looking for:

Beautiful. Next, we need to style all this text and position each sentence in the middle of the screen and on top of one another. I found the Modak typeface on Google Fonts and imported that into the of the HTML. I needed just a few lines of CSS to do the rest:

html, body { height: 100%; background-color: black; } body { position: relative; display: grid; place-items: center; } div { position: absolute; font-size: 6vw; color: white; text-transform: uppercase; font-family: "Modak", cursive; }

Okay, so now we can start to do all the fancy animating parts of this thing. I knew I wanted two effects: I wanted to spin the text around just like that TikTok above, but I also wanted to make the text sort of start more dull then become brighter. This encouraged me to split up the animations into two separate keyframes:

div { // other text styles go here animation: spin 8s linear infinite, opaqueness 14s linear forwards; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); animation-fill-mode: forwards; } } @keyframes opaqueness { 0% { opacity: 0.3; } 50% { opacity: 0.1; } 100% { opacity: 0.4; } }

We get something like this:

…which is extremely funny, but it isn’t ideal. All of the 188 absolutely positioned elements are rotating and fading in/out at the same time. So! We need to make a delay for each element, which thankfully we can do easily with Sass and the animation-delay CSS property:

@for $i from 1 through 188 { div:nth-child(#{$i}n) { animation-delay: (0.05 + $i) * 0.15s; } }

There’s no real fancy math going on here, I just kept smashing numbers into it until I started to like the visual effect I was seeing. Which was this kinda neat thingy:

Okay so now there’s one last step: color! But how do we give each sentence a different rainbow color that’s slightly different from the last? Well, after a bit of searching on CodePen I found this rainbow table by Cristen Jones:

Isn’t this just lovely? What we want to do is use the same sort of technique that Cristen used here — Sass’s adjust-hue() function. This takes in a value and then increases or decreases it depending on what you want. So, after punching in some completely arbitrary numbers, I came up with the following:

// This next bit is almost entirely stolen from Cristen Jones and this pen: https://codepen.io/thecristen/pen/ZOBYZx $base-color: #ffccb7; @for $i from 1 through 188 { $angle: $i * 2500/100; $this-color: adjust-hue($base-color, $angle); div:nth-child(#{$i}n) { animation-delay: (0.05 + $i) * 0.15s; color: $this-color; } }

And there we have it! A completely perfect use of a weekend where I was bored and stuck indoors all day:

Now available: CSS Flexbox and Grid Posters

Our complete guide to flexbox is something I use on a weekly basis and it’s saved me so much confusion and heartache over the years. But now I won’t even have to go to the guide at all because we just started printing our very own poster all about flexbox:

Designed by the ever-so-talented Lynn Fisher, this poster is a handy reminder how to layout elements on a page in a flash. So if you find yourself looking up these properties and values then it’s safe to say you ought to go and pick one up. There is a poster for grid too!