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