How was this animation done?

December 10, 2019 11:22 AM

I'm looking to do something like the nice animation on THIS SITE. Can anyone tell me what might have been used to make that? It's been a while since I made animations. Thanks!
posted by ecorrocio to Computers & Internet (10 answers total)

It is a JavaScript wrapper invoking an MP4 file.
posted by iStranger at 11:31 AM on December 10, 2019

I'm not saying that's how this was done, but I don't see anything there that couldn't be done in After Effects.
posted by lpsguy at 11:36 AM on December 10, 2019

After Effects for the actual video, I think?

You could do most of it in Blender, if you need a free tool.
posted by Alterscape at 11:48 AM on December 10, 2019 [1 favorite]

Likely After Effects or any other video compositing tool. It's just a video file that's being played by the browser.
posted by Fidel Cashflow at 12:38 PM on December 10, 2019 [1 favorite]

It's been a while for me too but Flash is a great choice for line/vector based things like this. After Effects is great too but with a little more emphasis on photoshop-esque fades, blends and manipulation. AE can work with resolution-independent files too though.

Flash as a final file format has been deprecated but that doesn't mean the tool isn't useful, you just need a different output.

Can't vouch personally but these came up on a quick google and look somewhat promising (and free!). Synfig. Pencil2D.
posted by erebora at 1:17 PM on December 10, 2019 [1 favorite]

I'd also put my money down on this being animated in After Effects. Here's a really basic tutorial on YouTube.

There are also some interesting ways to animate this kind of stuff directly in a web browser with SVG and HTML/CSS/Javascript. But I'm 99% sure that in this case they made a video in After Effects and then, like others have said, embedded it into the site.
posted by ssmith at 1:25 PM on December 10, 2019 [1 favorite]

I think it's animated on Flash 8, which is a tad outdated but still used. (For example, the entire Friendship Is Magic serious was animated in flash 8.) I was in school for graphic design w a focus on motion graphics, and that program was taught. This is around 5 years ago, and this style of animation was popular then. We also used after effects, but that was more for filmed videos.

either way, flash or aftereffects, the style is "vector animation" and is pretty simple. Most if not all of it is just applying pre-determined motions (bounce/shrink/slide/etc) to vectors you make. After Effects comes with lots of filters built in.
posted by FirstMateKate at 1:38 PM on December 10, 2019

The video folks have it. I got there by right clicking in Chrome and then Inspect Element. From there i was able to find the relevent block which looked like this:

div class="c-bg-video__wrapper" data-append-to="#intro .banner-thumbnail-wrapper" data-src-mp4="/s/alison-crabb-intro.mp4" data-poster-selector="#intro #thumbnail img" data-unmuted="true" data-noloop="true" data-mobile="true"

I appended that /s/alison-crabb-intro.mp4 onto the website location and voila: the mp4 file of the animation.
posted by zenon at 2:14 PM on December 10, 2019

I would vote for AfterEffects too.

I downloaded the file and looked at the metadata, but it only showed that someone had reencoded the video using HandBrake, so no hints there.
posted by gregr at 3:15 PM on December 10, 2019 [1 favorite]

Graphics look very much like they come from Noun Project.
posted by b33j at 7:52 PM on December 10, 2019