/tap-reveal-image

A replica of a template built whilst working at Mobkoi. Tap and reveal image shows a product image when the user hovers with the mouse or taps and drags their finger over the hotspots on the screen. It also changes the call to action based on the user’s last clicked product.

Primary LanguageJavaScript

Tap/reveal image

An interactive project built with JavaScript and GSAP animation.

This is a replica of a project built while working at Mobkoi. Tap and reveal image displays an image when the user hovers over a hotspot with the mouse or drags their finger across the hotspots. Another feature is the button CTA link changes based on the user’s last clicked product.

The problem it solves

The original template addressed limitations in the company’s ad software, thus expanding their product offerings. This engaging functionality is particularly effective for mobile advertising campaigns, as it encourages users to actively explore and interact with ad content. By dynamically updating the link to the last product viewed by the user, it enhances the possiblity of a product purchase. It was used to build adverts for clients such as Swarovski, Laneige, Burberry and more.

User instructions

Wait for the initial instructions animation to complete. On desktop hover over the grid/hotspots with your mouse to reveal an image. On mobile drag your finger across the grid to reveal an image.

Developer instructions

git clone https://laura-dumitru.github.io/tap-reveal-image/

Since this is an example project I would encourage you to clone and rename it so that you can use it for your own purposes.

Employers

You can see the original code I built while working at Mobkoi here: Link to my gist