May 8th: Typography, Transitions, and 2D Animation
Layered fonts in CSS
Mandy Michael works a bit of CSS magic and stacks five variations on the Rig Shaded font into one for a spectacular layered look.
Exciting Times for Interactive Animation
Chris Gannon gives us a glimpse into how he works with Bodymovin, Rubber Hose, and Greensock to create his inventive animations.
Start Spreading the News
Melissa Em's eye-popping poster shows off the high-style potential of CSS with text-stroke, filters, and mix-blend-mode.
Thinking with Type
David Bullock created a CSS tribute to the classic typography design manual "Thinking with Type" by Ellen Lupton.
Sponsored:
CodePen PRO Teams
Want to share CodePen with your whole organization? Check out our PRO teams! Collaborate, design, and develop together with the power of CodePen PRO.
Star Wars Day
The force was strong on May the Fourth and Revenge of the Fifth this year! CodePen team member Marie Mosley gathered up the newest Star Wars day Pens in her collection.
Creating a draggable element with JavaScript
Stephanie Liu shows how "I made this cute lil CodePen buddy in an attempt to learn more about creating draggable UI elements with vanilla JS instead of relying on a JS library to do it for me."
React Animated Page Transitions
Sarah Drasner's page transition demo uses Greensock and SVG to dramatic, geometric effect.
K-T on CodePen
CodePen member K-T says "I love canvas 2d!", and they show that love with beautiful, soothing animations of elements in nature.
Minimal Blog Concept with Vue.js #2
Mert Nerukuc's blog design has everything: slick hover effects, minimal but intuitive navigation, and striking monochromatic hero images.
Cloudinary Progressive Web App jQuery
Team Cloudinary's project is a great example of how to use service workers in Projects!
Brain Function Visualisation using SVG
Hover the sections in the brain in Sam Chahine's Pen to learn more about what each section does, or pick his brains about how he built it by checking out the source code.