10 Cool CodePen Demos (November 2023)
A collection of 10 cool demos shared on CodePen during November 2023
Pure CSS gravity button
Ana Tudor applies an amazing CSS animation to a button (although it would work with other elements, too). Turn the slow-motion checkbox to view the details in the particles as they approach the button. This demo doesn’t work on Firefox (yet).
Encrypted Password Reveal
Creating whimsical experiences is Jhey’s forte. This is an excellent demo for that, transforming something as ordinary as a password reveal into an adventure. It’s the small details. The demo uses GSAP for the animations.
Generative Wavy Circles
In this generative art piece, Lea Rosema animates a circular wavy gradient using six different configurable colors (use the controls on the top right to specify the ones you want). Check her other demos, too!
Single Div CSS — Owl
Divtober may be over, but we still see some interesting single-div demos like this cute little owl coded by Arman Borkhani. I really like CSS Art, and this is one of the nicest I’ve seen this month.
Pure CSS Video Part 1: Solar Sojourn
Creating a short film using HTML and CSS is one of my ridiculous dreams… unfortunately, I’m not good enough at CSS and animations to do it. But do you know who is? Ben Evans. He brings a CSS-only space-inspired music video. Beware, it may take a while to load on some browsers.
Scroll-based image sequence with GSAP and ScrollTrigger
The GSAP team has been sharing many demos on CodePen this past month (some of them respond to forums, and some are original). They are good for digging into this library and learning how it works and how to use it. This demo showcases scroll triggers and a helper for sequenced images.
Sliding reveal effect for images II
Temani Afif shares many interesting demos every month. This one caught my attention because of the animation and the faux 3D effect it has (take into account that it is a single image). I like how he plays with the online padding to create the effect.
Ghost Disco (updated version)
This demo by Anna Zeen Scavenger has A LOT going on: ThreeJS, shaders, shadows, animations, neon lights, interactivity (move the mouse from left to right and vice versa)… but it has something that makes it special and can’t take the eyes from it as I always discover something new.
Waves are lines
Fabio Ottaviani makes it back to the list with a simple and catchy demo. Something hypnotic. This demo reminds me of an animated version of Joy Division’s “Unknown Pleasures” album cover.
Untitled
Random generative art by Paul Slaymaker to conclude this month’s list. This kaleidoscopic demo is interactive too: refresh the page to get a new experience, click on the canvas to pause and play, and just enjoy the colors and the movement.