Relish Introduction Animation
Vector Animation Experiment

Capiche Relish SVG Animation

A short introduction sequence made for a [single page client gift website] (http://relish.capiche.co.nz “Capiche Relish”) using animation in CSS and Velocity JS. Utilises stroke-dasharray and stroke-dashoffset to simulate a pen tracing out letters.

As the text used for the word ‘relish’ was outlined shapes rather than live text I was forced to animate overlaid red paths to gradually reveal the text below. If anybody has feedback or a more elegant solution, for example using masks in some way or SnapSVG I’d be interested to hear.

Tags:
  • CSS3
  • HTML5
  • SVG
  • VelocityJS
  • Animation