January 13th: Space, Scrolling, and Sci-Fi
The Solar System 2010 - 2020
Rob DiMarzo's exploration of "the orbits of our celestial neighbors between January 1, 2010 and January 1, 2020" is built with Greensock 3. Check out the Pen description for in-depth details on how it was made and what it all means.
Pete Barr's latest Collection features animated renditions of posters from Mike Joyce's "Swissted" project, featuring redesigns of old punk, harcore, and indie rock show flyers.Sponsored:
Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.
The first #CodePenChallenge of 2020 is all about practical design patterns. For the first week, we worked with multi-buttons. Check out the Pens from week one, including CodeMeNatalie's minimal cut, copy, and paste buttons.
From CodePen to Wooden Art
Steve Gardner continues his experiments with laser-cutting CodePen images into wood with Pieter Biesemans' "Times of day CSS paintings". Follow along in this Twitter thread to see the results!
Zebra Page - Web Animation from a Procreate Drawing
A beautiful piece of text animation from Sarah Drasner. "I turned a drawing I made in procreate into a web illustration with SVG. I wrote up some posts on how I did it, coming soon!"
CodePen Radio #250: The Most Hearted of 2019
Chris and Marie chat about the most hearted Pens on CodePen in 2019. We talk about what was hot in 2019, and our personal favorite Pens and trends.
Florin Pop demonstrates how to pass a line though text in this step-by-step YouTube tutorial. Check out the video description for a link to a Pen you can fork to work along.
Smooth Scrolling Sticky ScrollSpy Navigation
Bram Van Damme shows you how to create a sticky nav bar with smooth scrolling and a “ScrollSpy” to update the active state of the navigation in this tutorial post with lots of helpful embedded Pens.
The Three-Body Problem
Vian Esterhuizen's animated Pen is inspired by Liu Cixin's sci-fi novel. Make sure to resize the browser to check out the design at different screen sizes.
Create a Codepen Promo Watermark
Bryan Robinson shows you how to make use of the external resources feature on CodePen to add a "watermark" to your creations.
Snow Globe - Zdog
Gabriela Johnson captures a cozy winter scene inside a snow globe and brings it to life with Zdog.
If you're already done with neumorphism, maybe it's time to try some Witchermorphism? Piotr Galor tosses a coin in that direction with this animated tab bar.Sponsored:
Need Some Front-End Development Training?
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, from Testing to Security.