↑↑ This animation is interactive. Make sure you try scrolling on the image. ↑↑
(Viewing this on iOS? Click HERE **)
The Artwork
I pulled inspiration from several sources for this project. Firstly, I love the limited color palette commonly found in the pop art posters published by art houses like Mondo. I used no semi-transparencies in creating this image. All colors are at 100% opacity, which means the art should print fairly cleanly, should a publisher choose to do so.
Secondly, I love the fadeaway art style of the Golden Age illustrator, Coles Phillips. Not only do I think this style just looks great, but this style also works very well when creating responsive graphics. Since the aspect ratio of a responsive graphic can change with the size of the viewport, it's advantageous to have zero hard-edge cropping on the artwork.
Lastly, I wanted to experiment with this hand-etched, linear finish. I find vector art done in this style to have a terrific sense of texture and motion. Digital artwork can sometimes look very plastic and stiff; I wanted to create a sense of volume without compromising on texture.
To do this, I created a workflow between Procreate, Concepts, and the Width Stamp and Vector First Aid plugins from Astute Graphics for Adobe Illustrator. To create the animation, I exported the separate layers from Illustrator, reduced their file sizes using ImageOptim, and imported them to Adobe After Effects. After creating a simple animation, I exported a JSON file with the Bodymovin plugin. To get the additional layer of interactivity, I uploaded my JSON file and image assets to CodePen, and added scroll events using the ScrollMagic and GreenSock coding libraries (needed a bit of help with scroll events on the mobile side, though).
Non-interactive, autoplay version of the HTML animation. The interactive version can be viewed HERE.**
Sample Article implementation
The implementation
I wanted to create a visual graphic that was custom-tailored toward optimizing conversions for online publications. To me, this meant taking the traditional style of illustration, which one would typically find in an editorial publication, and layering it with animation and interactivity.
Many online products, apps, and marketing content already utilize animation and interaction to drive higher user engagement. There's no reason these principles can't be applied to visual graphics for online publications.
WHy Animation?
It's well understood that animated content gets more engagement than static content. In their report, 'Creative Considerations for Driving Actions', Facebook states that lightweight video, paired with static graphics, increased conversion rates 17%. Facebook is so convinced of the effectiveness of this form of content, their Creative Shop has built a tool to help advertisers add lightweight animations to their static graphics.
Presently, there's a growing market in the illustration world for "motion graphics." Most often these motion graphics take the form of animated GIFs. And GIFs can be effective: Dell, for example, saw a 109% increase in revenue after running a GIF-centric email campaign. However, GIFs have several drawbacks: the color palette and quality are limited, and there's no interactivity.
Even setting aside the benefit of interaction, GIFs as animated content are still very limited. You can't make them too big; meaning they make great spot graphics, but terrible "hero images." The MAGA Kanye graphic, for example, despite being scalable to over 2000 pixels across, is only a total of ~650KB (image assets and JSON file). In other words, it's a high resolution animation that won't bloat the loading time of a webpage.
If you export an animated GIF at that size, you'll likely get a file well over 10MB — not very mobile-friendly.
WHy interaction?
Like animation, it's well-documented that interactive content drives user engagement and conversion rates even higher. Paramount Pictures, for example, saw their clickthrough rate improve 35% when they ran an interactive "playable ad" campaign. SnappApp claims their interactive content generates a 45% clickthrough rate and a 40% conversion rate.
And because we're implementing the graphics in code, we can customize these interactions in many different ways. For the MAGA Kanye graphic, I set the animation to trigger on the scroll: to see the animation, the reader must scroll down below the fold, into the text of the article. This would very likely increase read rates.
WHy export it in code?
With platforms such as CodePen, handing off the final motion graphic can be done fairly simply. With a Pro account on CodePen, an artist can host his own files, load his own scripts, and generate his own embed codes. In other words, any Content Manager responsible for managing and uploading graphics would only need to know how to copy and paste a few lines of code in order to upload an interactive HTML motion illustration to their website.
Of course there are more options available, in terms of customizing animations and interactions, when the site owner hosts their own files and loads their own scripts. But simple implementation options are certainly available; anyone who knows how to upload a GIF or PNG via WordPress (or some other CMS) would be able to embed an HTML animation.
tl;dr?
Below is a quick infographic summarizing the benefits of
HTML interactive motion illustrations.
Work with me
Shoot a message over to jeff@jeffreylkarl.com (or just click HERE)
and let's make something great together.
Special thanks to Luis Villalba for his help setting up the touch events on mobile!
Also thanks to Hernan Torrisi for his tireless work on Bodymovin, and to Chris Gannon and Petr Tichy for their terrific ScrollMagic and GreenSock tutorials.
** Behance requires an iframe to embed content. For some reason iOS doesn't handle iframes particularly well.
However, regular HTML embedding (no iframe) should work just fine on all devices and browsers.
