
The Al Jaffee / Mad Magazine Fold-In Effect in CSS - thomaspark
https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/
======
fluxsauce
This is fun, thanks for making that! There's a treasure trove of Al Jaffee's
work that can be shared with future generations.

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...](https://www.washingtonpost.com/arts-
entertainment/2020/06/06/al-jaffee-mad-magazine-retires/)

------
acomjean
how the fold in came to be an every issue feature is kinda a fun story:

From his 95th birthday article (gothamist). It has a nice video too:

[https://gothamist.com/arts-entertainment/hanging-with-al-
jaf...](https://gothamist.com/arts-entertainment/hanging-with-al-jaffee-mad-
magazines-95-year-old-journeyman-cartoonist)

"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." "

------
staycoolboy
This is such a great example of how CSS is often overlooked. Very impressive.
I learned a lot from reading it.

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.

~~~
ponker
What is the advantage of doing something in CSS vs JS?

~~~
staycoolboy
All of the peer answers are excellent, here are my $0.02:

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.

------
jedberg
Cool effect but totally broken on Safari. :(

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.

~~~
reaperducer
_Cool effect but totally broken on Safari_

Works fine in my Safari: 13.1 (15609.1.20.111.8) on Catalina (10.15.4).

~~~
jedberg
I'm on Safari: 13.1.1 (15609.2.9.1.2) on Catalina 10.15.5

~~~
jeffhuys
Check your pinch-to-zoom. I can mess it up by zooming while it's animating.
But it looks okay on normal zoom levels on Catalina with Safari 13.0.4.

------
nsxwolf
Broken for me on Chrome, after the animation a portion of the lower right
quadrant re-appears, flipped.

------
bjarneh
Every time I see something like this I'm reminded of how little CSS I actually
master.

~~~
gridspy
It's OK!

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.

~~~
bjarneh
There are certainly people a lot better than me when it comes to CSS. Some of
the dynamic aspects of CSS (i.e. anything that contains a "duration" for
instance) seems somewhat unnatural to have in the CSS, but that might be
taste.

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 :-)

------
Yhippa
These were great growing up. The March Madness one made me laugh. It's good to
know that these things still give that effect. Will almost certainly be lost
to future generations.

------
dang
See also
[https://news.ycombinator.com/item?id=23442041](https://news.ycombinator.com/item?id=23442041)
about Jaffee.

------
golem14
Awesome (on MacOS Chrome)! Really neat what you can do with CSS. And thanks
for the shoutout for Al Jaffee!

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.

------
Osiris
Can someone explain exactly how this is work is working? I realize it's using
CSS transforms but I can't visualize it in my head from reading the code.

~~~
grenoire
Right half folds inward, and right half's right half folds outward.

------
latchkey
I built the renderer and thus page turner mechanism for Wrap [1], which kind
of reminded me of this. It was interesting to build it and I learned a lot
about performance optimizing CSS. Apologies if it sucks now as I haven't been
involved on the project in many years.

[1] [https://www.wrap.co/](https://www.wrap.co/)

------
gkoberger
EDIT: I misunderstood how this works!

Really cool! Might be good to make the "closed" the default and the mouseover
open it?

~~~
function_seven
That would be like telling the punchline first, then the joke.

The folded-in view is the surprise.

~~~
pbhjpbhj
Except in this image, isn't the folded out view much more interesting, ie more
of a surprise? I thought the idea was to have a juvenile joke, but the hammock
coming out from tri-fold and the cake appearing from the cauliflower-haired
old man appears to be the surprising part.

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.

~~~
adrianmonk
The way it works in the paper magazine is that the image is printed on a
single page, and you receive it unfolded like any other page. (That's why
there are instructions on the top right about how to fold it. If it came pre-
folded, you wouldn't need those instructions.)

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.

------
neovive
These are wonderful! I resubscribed to MAD Magazine a few years ago when my
oldest son was able to understand the humor. The fold-ins were his favorite
part. What an amazing run for Al Jaffee and MAD magazine--truly a part of
history.

------
TheRealDunkirk
Aaaand the two halves don't line up in Safari, ruining the effect.

Figures.

~~~
minxomat
Same on Mobile Safari

~~~
city41
Try it again, the author said he fixed it in the comments on his page. It is
working correctly for me on iOS.

~~~
jtbayly
Not working for me on iOS.

------
matthewfelgate
Oh, is this what they did in that episode of Malcolm in the middle...

------
hachibu
As a kid, this was my favorite part of Mad Magazine.

~~~
allenu
Same here. I think as a kid I tried to work out what the fold-in would look
like without messing up the page itself. :-)

~~~
zwieback
Me too. I grew up in Germany and on one of our trips to the US (late 70s
maybe) we discovered Mad Magazine. My dad decided we all needed a subscription
- he was always trying to find ways for the kids to brush up on their English.
So for many years we had Mad Magazine mailed to us in Germany. We tried not to
mess up the page for the other readers in the family.

------
chrisweekly
Cool idea, but (1) :hover excludes mobile users, maybe pick a more accessible
event trigger? and (2) alignment issues

~~~
qznc
Touch works for me due to :active.

