Skip to content

Instantly share code, notes, and snippets.

@kyleledbetter
Created January 22, 2014 22:07
Show Gist options
  • Save kyleledbetter/8568375 to your computer and use it in GitHub Desktop.
Save kyleledbetter/8568375 to your computer and use it in GitHub Desktop.
function simulatePathDrawing(path) {
// 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 1.5s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
path.style.strokeWidth = '3px';
path.style.fill = 'rgba(255,255,0,.12)';
}
var chars = $('svg.logo-path path').on('mouseover', function(e) {
simulatePathDrawing(this)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment