See the Pen Drop J by Chris Lowe (@alltimelowe) on CodePen.


J for jump. Set in Fredoka One, another Open Font License typeface. Fredoka One come in just one weight and is a very playful rounded font ideal for headlines.

The effect is my most complicated yet—through a combination of animating translateY and scaleX the J appears to not only jump up and down, but also squishes a bit as it hits the ground. I tried to add to the effect by adding a slight animated text-shadow, mimicking a motion blur common in traditional animation. To tie it all together I added a pseudo element, a circle with a generous box-shadow, then squished, to act as the shadow. It scales along the x-axis, following the same cubic-bezier animation timing as the J. Phew.