How Impress JavaScript For Motion Graphics

When After Effects is Too Much

AfterEffects is powerful software, don’t get me wrong. It especially comes in handy when you’re doctoring transitions and adding special effects to a video you’re producing. A major trend that I’ve noticed recently though is that it’s now being heavily used as a tool to create marketing videos and intros. Simply put: AfterEffects is sometimes too robust. You’ll spend more time tweaking camera angles, adding layers, timing certain effects, and toying with video exportation than you will actually putting the damn thing together.

Impress JavaScript Is Limitless, and Free

If you haven’t heard of it yet, head over to GitHub and download the source code. Download the zip file in the upper laft hand corner.

Once downloaded, unzip it open the index file using your favorite text editor (mine is TextWrangler). The comments are thorough and for the most part, self-explanatory. A few things to keep in mind when editing this file.

• Each slide is technically a new page. This is great if you’re using this for a dynamic slide show to be presented publicly on the web. It makes navigating through it more cohesive for the visitor and allows Google to index each slide separately.
• This will not work in Internet Explorer 7 & 8. Sorry, grandpa will have to download the latest version of Internet Explorer if you’re wanting to produce this for the web. It degrades gracefully though, showing an error message on top and presenting everything vertically.
• You can’t control transition speed. This can be frustrating if you’re trying to add special pacing to your presentation.
• No control over the transition type. You’re stuck with the “slow cross fade”. Although this is in my opinion, the most elegant transition some may prefer more immediate transitions like a dissolve.

The basic concept you must grasp to properly work with this JavaScript library is spacial assignment based on the X-axis (horizontal), Y-axis (vertical) and Z-axis (front to back, 3D).

These basic commands allow for us to frame what’s around the HTML content that we drop in. If you’re not good with HTML you can even create your own images (made in photoshop or wherever) and drop them into a folder in the root. Then all you have to do is reference that image and you’re good to go.

Turn It Into A Movie

Using Camtasia or any other screen capture software you can put your browser into full-screen mode and record your impress.js slideshow. Camtasia is nice because it allows you to do an easy voiceover as well. Once you get the hang of using impress.js it’s quite easy to create custom animation videos and presentations.