Vertigo, 1958 HTML Movie Poster

watch the poster

I can’t help but to hear the Mad Men opening credits music when watching the start of this animated poster. The ‘falling man’ of the Steve Fuller directed titles has been mistakenly attributed to some angry Eastern European rebel rousers of earlier centuries – apparently there’s multiple occasions.

As well, this post’s Saul Bass designed poster seemed to be a plausible inspiration. Or at least the uncannily similar book cover design Bass created for So Dies a Dreamer. But no. Apparently show runner Matthew Weiner more simply mused about a business man that takes the elevator up to his office, sets down his briefcase and promptly sails out the window with himself. Yikes! A bit of an on the nose metaphor for Don Draper’s self-destructive tendencies.

This is my second effort animating SVG with the GreenSock animation JS library and I’m still very much in love. Being able to build a spirograph with code – compared to that incredibly frustrating toy from the 70s that never led to images as seen on TV – was a really interesting exercise.

It actually started with trying to understand how the original Bass spiral was created. Start with an ellipse? Circle? One or two? What’s the repeat pattern? Scale? Position? Rotation? Which combination? For initial draft exercises like this I tend to use Illustrator which allows you to quickly repeat a transformation. My experiments led to vast artboard which looked like this:

Eventually I figured out that the spiral was created from a single ellipse that rotates and scales at an exponential rate. The shape spends a lot of time small and slowly rotating, but as it accelerates, it spins and grows faster. That kind of changing velocity with scale and rotation is built into CSS with transition timing functions – ease-in, ease-out, or the more complex cubic-bezier functions.

Now I just needed to create a few dozen ellipses and stagger one after the other, each growing and rotating with a nice easing function. And all that’s a piece of cake with GreenSock’s tweens. Here’s what that looks like:

.to(ellipses, {
    scale: 5,
    rotate: 360,
    opacity: 0,
    ease: 'power4.in',
    stagger: { each: 0.1, repeat: -1 },
    duration: 15,
  })

This roughly translates as: Select all the ellipses, and over fifteen seconds, using a slow-to-fast ease – make them five times bigger, rotate them 360 degrees, and fade them out at the end. Also, stagger each ellipse’s start by .1 seconds, and do this indefinitely. Have a look at one selected ellipse go through the process:

Making spirographs with JS!

After getting to that point, I couldn’t help but move on from the classic and work on the deluxe final poster linked at the top. There’s lots of other math that you can play with, randomly repositioning the ellipse as well as changing the length and width. Also futzing with the easing functions available with GSAP allows you to get this chaos of ellipses. And befittingly Madeline/Judy is visually lost probably due in large part Scottie’s self-destructive madness 😱.