CodePen showcase: Round 1
9 Aug 2016
Metafizzy's libraries have hundreds of CodePen demos. One for every feature, option, and behavior. But these demos are simplified examples. They don't do a good job of showing off what they're capable of. So I reached out to the true code artists of CodePen to see how they could make Isotope, Flickity, and Packery shine in the spotlight. Give 'em the old razzle-dazzle.
I'll be collecting these in the Metafizzy showcase CodePen collection, as well as individual collections for each library.
Kseso makes the most of Flickity and CSS, using is-selected classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!
See the Pen Playing with Flickity by Kseso (@Kseso) on CodePen.
Jesse Shawl made a slide puzzle with Packery. I can't believe this actually works!
See the Pen Order the tiles by Jesse Shawl (@jshawl) on CodePen.
Gregor Adams took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.
See the Pen Pack(ev)ery thing by Gregor Adams (@pixelass) on CodePen.
But he didn't stop there. Gregor made another Packery demo, this time using simpler rectangles. Check out how it works when you resize it.
See the Pen Packery hackery by Gregor Adams (@pixelass) on CodePen.
Perhaps the best use of Isotope ever, Antoinette Janus makes sense of many characters and fusions in Steven Universe. I have a hard time remembering the difference between Sugilite and Sardonyx ;)
See the Pen Steven Universe x Isotope [Sponsored] by Antoinette Janus (@acjdesigns) on CodePen.
Bennett Feely makes a 3D, hovering Packery layout. It's melting my mind how this works.
See the Pen Packery layout with 3D blocks by Bennett Feely (@bennettfeely) on CodePen.
Katy DeCorah brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.
See the Pen Geo scope by Katy DeCorah (@katydecorah) on CodePen.
It's a delight to see what creative coders can come up with.
We have some more artists lined up so stay tuned for Round 2!