This week: Animated Tooltips, Cut Paper Text, and Interactive Kittens
Free Figma Templates for Your Next Project
If you're looking for a design boost for your next project in Figma, these templates from SaaS Design will help speed up your workflow!Sponsored:
Learn a simple new way to add auth.
A 10 minute, step-by-step tutorial for adding secure auth to your React applications with Userfront.
Make the web less boring
Letters pop on hover in this fun text animation/web manifesto built with Splitting.js by Andy Bell for Piccalilli.
Amit Sheen flies the Awesome flag made of many, many flapping divs in this CSS animation.
Click the button for random colors, or hover over the starfield for warp speed in this Pen from Kevin Levron, starring TroisJS.
#CodePenChallenge: Hide and Reveal
For the final week of the April challenge, we worked with hide & reveal microinteractions. Check out the Pens from week four, including Takane Ichinose's cheerful "Hover Button Smiley".
CodePen Radio #313: Conflict
Co-founders Chris Coyier and Alex Vazquez are on the show to talk about conflict in a startup. "Are we experts in this? Far from it. Have we thought about it a lot? Ages. Do we have a long way to go in getting better at this? Sure do. The fact that we all still have extremely different temperaments for conflict at all is part of what makes it hard."
Simple, Pretty Blockquote
You can't go wrong with a good-looking blockquote, like this beaut from Mark Sottek.
Style Stage - Comic
Katherine Kato's contribution to Stephanie Eckles' Style Stage showcase is a pop-art phenomenon in bright yellow, red, and blue.
Countless tiny particles of light fill the page and flow in this gorgeous Pen by Liam Egan.
Paper Cut Text Effect
"This effect is achieved by layering 3 instances of the text, one for the cutoff, one for the overlaying characters, and one for the shadow." From Yoav Kadosh.
A little pixelated pal does everything it can to be close to your cursor in this adorable animated Pen from Masahito Leo Takeuchi.
Best in Chrome, this scribble machine from Adam Kuhn lets you tweak and modify a squiggle, and learn a little something about duration and delay in animation.
Mikael Ainalem adds a bit of subtle shape to tooltips. Hover over the question marks to summon one!