display advertising

HTML Canvas

Galaxy S10 – Fortnite

HTML5 introduced the Canvas element which is meant for direct pixel manipulation using Photoshop-like effects. A canvas can have a 2D or 3D drawing context. Animation can be acheived by drawing new images to the canvas several times per-second. This example uses a Javascript loop to draw particles to the canvas at a rate of 30fps. View ad | assets


Galaxy Fold – Launch

All modern browsers have basic support CSS 3D. It's a bit convoluted to use, but has a tiny footprint compared to more robust Javascript 3D libraries. Although not true 3D, a lot can be acheived through careful perspective transformations of 2D elements. View ad | assets

After Effects + Lottie

Galaxy – Upgrade to Galaxy

Lottie is only a few years old but is gaining in popularity. After installing a plugin called Bodymovin in After Effects, animations can be output to a JSON format which can be played back natively on mobile and in a browser using the Lottie JS library. Even though Lottie only supports a subset of After Effects features (works best with vector content, no Expressions or fancy effects), it allows for very high quality animations that compress very well. Lottie animations also allow playback control and dispatch events. View ad

Sprite Animation

Galaxy S6 – Launch

Sprite is a generic term for a small bitmap image (usually one of many images stitched together into one large image for better performance). This example uses image sequences stiched together into long strips that give the illusion of motion like a film strip. This setup provides granular control for playing animations forward or in reverse or dynamically changing the frames per-second. View ad | assets

Interactive Video

Galaxy Fold – NYTimes Masthead

Ads containing video must be run on a rich media platform such as Google's DoubleClick Studio. This ad features a 'draggable' video that spawns smaller videos based on user interaction. View ad

More ad examples