This week: Splits, Sliders, and SVG
How to Create the VueConf Load Animation (While Learning About Vue.js and SVGs in the Process)
Michael Mangialardi combines SVG, animations, and Vue.js to animate the logo to VueConf 2017. We would have called it VueCamp with that kinda logo. See, because, it looks like a tent.
Recreating Legendary 8-Bit Game Music with Web Audio API
Greg Hovanesyan is back with another tutorial that's equal parts entertaining and educational. Learn how he used the Web Audio API to recreate classic video game tunes.
Tunnel Animation (Part I)
Louis Hoebregts' post goes into deep detail on how he creates his mesmerizing WebGL tunnel animations.
Rulers of the Sea
Elmer Balbin's #dailycssimages creation starts out looking like some regular ol' tools of measurement, but morphs into something delightful.
CodePen Radio #122: Capacity Planning
On the latest episode, the three founders get together to talk about how traffic is routed around CodePen's servers. We get into the details of auto-scaling and provisioning with our AWS plan. Also, a little discussion of the new Projects feature!
Marco Dell'Anna created a fun collection of particle experiments full of waves, balloons, and metaballs.
Mike Schultz ported his Electron color picker app to CodePen, so now you can use it in the browser too!
Split Slick Slideshow
Fabio Ottaviani takes a clever approach to a slideshow using a vertical split in each image so each half of the image slides as you click or scroll.
Creative Coding Club: Make it Rain
Nat Cooper's Creative Coding Club gathers devs and designers to collaborate on themed projects every month. This month's theme is "Make it Rain". Nat shared this SVG rainbow animation project to help kick things off.
Split emoji text effect with CSS
"So I had this dream last night and realised, OMGOSH I can split emojis! Not sure how I didn't realise this sooner." - Mandy Michael's CSS epiphany lead to some amazing emoji mashups.
Blend Mode Slider - Double Exposure
Sullivan Nolan uses "CSS blender backgrounds & animation to create double exposure effects for article slides" and the effect is hauntingly beautiful.
Checkboxes and Visual Affordance Indicators
"A day in the life of the humble checkbox and how we can help make it look more awesome, and make its current state much more obvious too." from Adam Clark.