3D split-flap display ✈️

nerd sniped myself with this tonight keeping it performant is key 🤙 this meant leaning into a GSAP trick picked up a couple of years back 1. cache an animation that animates through all letters 2. moving to letters involves scrubbing that playhead

wanted to build this for a while this share from @mamuso was enough to trigger me into sitting down this evening only because when visiting the site, there was an expectation of a split flap animation somewhere 😅 the font/site is slick though 🔗

like seeing these and want to learn more about how to build awesome UIs for the web? Check out my newsletter, "The Craft of UI" this demo is likely to be next week's issue 🤙 👉

haha

💀 leaving for "Phoenis" tomorrow

Too good

ʕ　·ᴥ·ʔ▲ʕ·ᴥ·　ʔ

Besides the scrubbing how is the actual flap animation being done? Been trying to figure this one without using jquery or so 🤔

using GSAP so I can animate the playback head it's two pieces animating on rotateX from different angles on repeat. then scrub that by however many seconds to get to the desired character

Ship it 🛳️

@dmg_exe you got me - added some audio