VisitCostaRica.com is the official tourism portal for Costa Rica. The platform is designed to convert global interest into boots-on-the-ground travel by showcasing the country’s unique blend of 'Pura Vida' culture, world-class conservation, and luxury adventure.
Visit Costa Rica approached TravelDesk to produce and run dynamic display ads for their upcoming Air Service campaign.
This campaign required:
Without a dynamic solution, each variation would need to be delivered as a static file.
Considering the number of banner sizes, markets, locations and audience segments, creating static banners would result in 6,720 files. This would increase editing time, make it error prone and hard to maintain.
The goal was to reduce this complexity while allowing highly targeted content.
Instead of static builds, I implemented a data-driven system where:
This reduced thousands of potential outputs into a small maintainable codebase.
Used for layout and visual structure. Given the strict file size limits and animation requirements, a frontend framework would have added unnecessary overhead.
Used for:
GSAP is an animation library that simplifies the process of creating complex animations and offers features that go beyond what CSS animations can achieve.
GSAP was used to orchestrate animations and handle the SVG wave morphing effect required by the brand guidelines.
It was chosen over CSS animations due to:
From an admin standpoint, this setup enabled content edits without modifying code.
I learned and utilised GSAP’s MorphSVG plugin to meet these requirements with no prior knowledge.
During this project, the Ad Ops and media team weren't familiar with handling geo targeted audience based ads.
I collaborated with them to:
Some locations introduced unusually long city names. To handle this, I wrote a utility function that automatically resized text when it exceeded its container.
This ensured:
Before launch, all banners were tested to ensure:
Performance considerations included: