Open danro opened 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';
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/