resize this div to "flip" the "book"!
(so sorry, mobile! I wish resizing worked there 🤷♂️ I've added a gif version only visible on mobile so you can at least enjoy the animation!)
While a magician never shares his secrets, I'm not a magician and, personally, I think the behind the curtain look enhances the magic, so here's some notes if you'd like:
This started with playing with my avatar, and quickly grew out of control. I knew this could be done and knew I had to do it... despite disliking animating. Once I figured out something that was a) attainable for my animating patience and b) took advantage of the sense of depth attainable by a slowly growing image, I started off with a quick sketch of the key frames, then went to GIMP, where I knew I could: make a GIF where each layer is a frame, do some basic onionskin with transparency, and, most importantly, preview said GIF while working.
Once I was happy with the pacing of the swoop, I exported as a .ora, then extracted that with 7zip to get each frame as its own png (thanks google/stackoverflow for that hot tip!)
After that it was sitting in notepad making 16 versions of the same chunk of breakpoint visibility css, modifying which layer was visible at what breakpoint and then adding the 16 frames as base64 data URIs. It was a lot of c&p.
The actual css is hardly a crime:
<div style="resize:horizontal;overflow:auto;padding:.25em;min-width:360px;max-width:610px;width:380px;">
<img src=[image here] style="margin:0em;">
</div>
The gist is adding resize in a single direction and keeping the overflow to auto for resizing the contents. Then you just have to make sure the div starts and ends on either side of your breakpoints coded into the svg! I thought it was fun to include a minimum smaller than the starting width to provide a little springiness if you're rapidly expanding and shrinking the div, but that's not actually necessary.
I hope you'll take this and run--it's really neat, and I think there's a lot of ways you can play with it... and I don't have the animation patience to make anything truly elaborate. Initially, I thought about constraining the div's height so the window doesn't shift at all, but I thought this was funnier. As it stands, your image is always going to start small and grow larger as the animation progresses--I'm not sure how to crime around that limitation yet.
oh--I also just went back and added in a mobile-only gif view of the animation, so there's something here for when you're on your phone! The css for this is pretty cool, and you can read about it where I read about it: responsive css crimes. It'd probably be Max Cool if I did the nested details trick with non-looping gifs to allow you to toggle between the gif and its reverse, but I'm done poking at the files for now 😅
