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
Where personal meets luxury™
May your year shine bright from sea to shining sea.
From your Q Cruises familyExplore The World