What is a CodePen?
CodePen is a website that makes it possible to write and share frontend code (I usually write HTML & CSS, sometimes JavaScript, sometimes Tailwind).
Other users of the site can also heart your creations and of course, you can send them or share them on social media to get help, show off or just share your knowledge.
It’s like part social-media and part a specialized web app for professionals. It’s wonderful.
Why Do I Make Them?
I try to make one every week, but sometimes life get in the way, so I’m not sure going forward I will have this kind of post every month.
Long story short - to learn new things in frontend, every CodePen I make makes it easier for me to understand some new concept or a new feature, I like doing it in CodePens for 2 main reasons:
It’s a clean sandbox to work with, no React, no Next.js, nothing to obscure how this feature really works (and no excuses like - it works on my machine!)
To have something to share, of course. it’s fun to share in social media and get some likes but it’s even more fun to show to a fellow developer and get asked “how did you do that?”.
All CodePens (also known as Pens) in this post are embedded as custom HTML Snippets, so you can see the creation front and center, the code should automatically open to the left if you switch to the HTML tab, the CSS tab or the JS one with a press of a button.
If there’s no JS tab to click on, it means this CodePen is made with pure HTML and CSS, no JavaScript involved (usually it means it’s an animation).
And now - to the CodePens themselves:
New J Animation
This is a “simple” CSS animation, its only complexity comes from the inverted colors, which I did with mix-blend-mode but I had to make it only on some of the keyframes so it will disappear on the background at the start and end points, otherwise the loop won’t work.
Not Closing Any Rings
On the flip side, this animation was anything but simple, it might look simple but it’s not, once you remember that in CSS you can’t really change the length of a circular line on the spot, or once you realize you have no line-cap property (like stroke-linecap from the SVG standard).
I could make this animation fairly simple with SVG animations (or in After Effects) but making it with CSS was the point, and I’m happy with how it turned out.
Based on Apple’s Health App, most people know it as “The Rings” (or “Activity Rings”) on their Apple Watch.
You might have seen this one before, as it made the CodePen Spark (CodePen’s weekly newsletter - here’s the link).
The whole idea started with a silly joke - buttons in product design and buttons in fashion design are quite different, but what happens if we marry the two?
Text Scroll Animation
I wanted to make some creative scrolling effect, I thought at first this could be done with CSS scroll-animation but the browser support wasn’t there at the time (today it’s much better).
It looks simple but there’s a lot going on here, the variable font, the font-size, the opacity and of course the hover effect all contribute to a full vision of scrolling that isn’t just scrolling.
To conclude - this month was very prolific, I did manage to make a new CodePen every single week, some were better than others but at least I showed up every time.
I even got into the CodePen Newsletter (again - here’s the link) and I’m really proud of how it turned out - those buttons were my favorite too.
See you next month.