Nite Jogger

Created at JustPremium

About 'Nite Jogger'

I was tasked with designing a creative to go in JustPremiums responsive mobile skin format, which would show off a new Adidas trainer. I decided to go with a swiper functionality, which would essentially show two different creatives within one unit, whereby the user can swipe between the two. I planned on using Pixi.js for the masking, which meant I was able to create additional animated smoke effects which I knew Pixi.js was able to mask.

The Execution

Once the design was approved I implemented the creative using Pixi.js. This enabled me to create a particle system for the smoke effect, whilst also being able to perform and animated mask between the two colours for the swipe. I was able to also able to add a floating effect to both sets of show images. Because all the animations are code-driven, the overall weight of the ad is also very low, and also makes use of the device gpu to render, meaning it has a smooth framerate.