-
Notifications
You must be signed in to change notification settings - Fork 25
Open
Labels
Description
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';