The Al Jaffee / Mad Magazine Fold-In Effect in CSS
thomaspark.co
thomaspark.co
Al Jaffee just retired at 99! Here's article on his retirement, which is also linked to from the original site: https://www.washingtonpost.com/arts-entertainment/2020/06/06...
From his 95th birthday article (gothamist). It has a nice video too:
https://gothamist.com/arts-entertainment/hanging-with-al-jaf...
"One morning I woke up and I spread out all the magazines I was subscribing to which included Playboy, and National Geographic and a couple of others. When I opened them up, the things that popped out was the first one, Playboy, was the fold-out; and then National Geographic had something that showed the new stadium being built by some athletic team. Then there was another one with a fold-out. Of course, the way we work is something triggers a thought, and what triggered in me was if all of them are doing expensive, full color fold-outs, why doesn't MAD Magazine do a cheap fold-in? MAD was black and white at that time.
I thought about it for a moment, and then I looked in the newspaper and there was a story about Elizabeth Taylor and Richard Burton and Eddie Fischer and accusations that Elizabeth Taylor was going from one guy to another. I thought, "Well, that might make a fold-in. I did something very simple, which was to put Elizabeth Taylor on the left side, and Richard Burton was somewhere in the middle, but on the right side, there was just some young guy. The question was something like, "Who's going to be Elizabeth Taylor's next?" We thought it would be Richard Burton, but if you folded it in, it was just that guy on the right side, and it says, "some guy in the crowd." That was the gag. I took it into the editor, Al Feldstein. I said, "Al, I've got an idea that strikes me funny, but you're going to reject it because if you printed it, it would mutilate a page in the magazine." He looks at it. He says, "I like this." He immediately jumped up and ran into Bill Gaines, and then came back to me and said, "Bill said, 'Lets do it. If the kid folds the page, and he feels he's ruined the magazine, he'll buy another magazine for his collection.'" Ever the money man.
I did it, and that was it. It was a one shot gag. A couple of weeks later, Feldstein rushes up to me—I happened to be up at MAD at that time—and said, "Where's the next fold-in?" I said, "Al, there is no next fold-in. That's it. It was a one time gag." He says, "I want another fold-in." "
I bet if you had asked how to do this on StackOverflow without any prompting about language, you would have seen a LOT of javascript Me included.
EDIT: I literally just went to a project I'm working on and removed a piece of JS code that animated a feature because of what I learned from this example.
Of course, the real trouble starts when you need to support older browsers and you realize you need to polyfill or change your strategy.
As a design principle, it makes sense to use/re-use the capabilities of a component, rather than an agent acting on that primitive. For example, HTML already has a built-in CSS engine that can animate. Re-writing the animation in JavaScript is redundant and adds more code, which means more bugs, more size, more maintenance, etc.
Consider this example in C: using printf("%f", val) versus writing your own convert_float_to_characters_to_stdout(val) function.
There are cases where you may want to do the latter because printf is a very large function for embedded controllers and sometimes excludes format specifiers to save space, especially %f. But normally you just use what you are given rather than re-inventing the wheel.
If it is done with CSS it is much more likely it'll be done by the GPU and will not interrupt the main thread and cause 'jank'.
The halves don't line up, and then when it's done the right half flashes back to a random portion of the image, and then when you move away to "unfold" it's missing a chunk in the middle.
Works fine in my Safari: 13.1 (15609.1.20.111.8) on Catalina (10.15.4).
Safari 13.1, MacOS 10.14.6
No matter what possible specialty you pick, there is probably someone better at it than you.
But only you have the exact mix that makes you... you.
Just focus on what brings you joy, and appreciate the skills you do have today. I'm sure you could figure CSS out if you decided it was your main goal.
I once worked for a company large enough to have its own designer who created the designs in Photoshop. Then we had another guy who created HTML templates + CSS from it; then all I had to think about was the back end code, those were the days. Now I'm a one man band struggling with some of the instruments :-)
BTW: Does anyone know if there's an archive of the german mad magazine ? The translation is an experience in itself, and while I found a commercial CD with all the mad archives in English, nothing for German.
Really cool! Might be good to make the "closed" the default and the mouseover open it?
The folded-in view is the surprise.
Anyway, the text is a little off for me - the letters clash NO, AM, FO, IN (almost the whole I is gone) - but it appears to be the underlying thing is just an image, so is the image off. A ½px margin sort of fixes it.
Overall impression is very slick.
So the format of the joke as used in the magazine is that you see the unfolded version first.
Anyway, in the one you're talking about, if you read the top-center text, it talks about what the artist gets to do for his birthday. As he blows out the candles on the cake, he wishes he could spend his birthday on the beach. The joke is that he actually celebrates it by trying to think of something to draw, i.e. he has to work.
Figures.