I got to be the featured guest over on The Keyframers the other day. We looked at a Dribbble shot by Björgvin Pétur Sigurjónsson and then slowly built it, taking some purposeful detours along the way to discuss various tech.
We start by considering doing it entirely in CSS, then go for some light JavaScript to alter some data attributes as state, then ultimately end up using flipping.
This is where we ended up:
See the Pen
Navbar Nudging w/ Chris Coyier | Three Person Collaborative Animation Tutorial | @keyframers 2.14.0 by @keyframers (@keyframers)
on CodePen.
The video:
(My audio goes from terrible to good at about 12 minutes.)
Other takes!
Some of our Animigos made their own fantastic versions of this animation!
➡️ @steeevg: https://t.co/ZP5RxJcAAa
➡️ @mariod: https://t.co/PAFiGyZzGsHave another solution in mind?
Give it a shot and share your results!— the @keyframers (@keyframers) August 15, 2019
I love the attempt to build it without going straight to Flipping, which makes it all that more educational. On the final Codepen, it looks like the instances of
elNav.style.setProperty()are from an earlier version, and might be confusing to those finding the snippet in the future.