📝 CSS-Tricks 207: Psychedelic CSS, Eleventy, and a quick guide to Emotion

View this newsletter on the web.

[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:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s