BKWLD / tram

Cross-browser CSS3 transitions in JavaScript.
186 stars 23 forks source link

Support SVG dash offset #11

Open danro opened 11 years ago

danro commented 11 years ago

SVGs are not the best choice for animation, but I'd like to experiment with this neat trick for drawing lines:

From: http://jakearchibald.com/2013/animated-line-drawing-svg/

var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';