Cruise line holiday card

Animated SVG masking an image

Animated SVGs are nothing new, but when animated subtly, overlapped, and tweaked with extra CSS, they can simulate a flowing ribbon. This digital holiday card was styled to match an existing print piece.

Tech & Technique:
SVGs hand-coded to animate in two pairs: one set of shapes with a gold gradient, and another to mask those shapes with a solid color matching the background.
SVG Injector 2 to allow the SVGs to remain separate files and still be included in the DOM
CSS animations triggered by ScrollMagic at just the right time

Components

holiday-background_image
holiday-left_wave-white
holiday-left_wave-gold
holiday-right_wave-gold
holiday-right_wave-white

Construction

Q Cruises

Where personal meets luxury™

Happy holidays

May your year shine bright from sea to shining sea.

From your Q Cruises family

Explore The World