June 5th: Fireballs, Meteors, and Orbs
Simple Bodymovin Demo
Kittons demonstrates the kinetic magic of Bodymovin in this deceptively simple Project.Sponsored:
66 "snack sized" videos covering everything about ES6
Using CH Units for Typographic Design
"Showcasing how ch units work and some of what you can do with them is a typography focused fluid layout" - from MadeByMike.
While playing around with shaders, clindsey created this mesmerizing fireball.
CodePen Radio #132: Jag Talon
On the latest episode of CodePen Radio, the team talks to Jag Talon from DuckDuckGo! Jag tells us about how CodePen helped him learn CSS for his job and how he's using Projects to redesign his podcast's website.
Pow! CSS only SVG animation
"Animating an SVG using only CSS, Why? Why not!" by Kyle Henwood, inspired by a Dribbble shot by Fraser Davidson for Cub Studio.
"Object-fit cover for background videos. It's a new CSS property for sizing background videos like background images" - from Dylan Macnab.
CodePen's master of surrealism Gerard Ferrandez revisits his popular work "What Power". For an especially weird treat, check this one out in the grid view on Gerard's profile page.
A cheerful meteor hurtles through space in Marjo Sobrecaray animated recreation of a Dribbble shot by MBE.
Upload an mp3 file into Misaki Nakano's Pen and watch the orb pulse and rise along with the music.
Siphon and Gravity
"Each line is attracted by the center in rotation" in Jeremie Boulay's swirling siphon. Open up the dat.GUI controls to play around with the effect.
CSS Clip-Path Masks with Custom Properties as API
The images in Stas Melnikov's gallery have cool frames around them, and cleverly animated hover states, too!