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.
makes the most of Flickity and CSS, using
classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!
Jesse Shawl made a slide puzzle with Packery. I can't believe this actually works!
Gregor Adams took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.
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.
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 ;)
Bennett Feely makes a 3D, hovering Packery layout. It's melting my mind how this works.
Katy DeCorah brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.
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!