Snap.svg only select one path

Question

I'm trying to do this origami-like animation, but Snap.svg only selects one path – the first one to animate.

I already tried to change path = s.select( 'path' ) to path = s.selectAll( 'path' ), as said on documentation, but it doesn't work.

Any ideas of where I'm wrong?

Here is the code: http://jsfiddle.net/HGwXL/

Answer 1

selectAll will return a set. So you will need to iterate over that set, probably with a forEach....

var pathSet = s.selectAll( 'path' );

pathSet.forEach( function( myPath ) {

      var pathConfig = {
          from : myPath.attr( 'd' ),
          to : myPath.attr( 'data-path-hover' )
      };

      el.addEventListener( 'mouseenter', function() {
          myPath.animate( { 'path' : pathConfig.to }, speed, easing );
      } );

      el.addEventListener( 'mouseleave', function() {
         myPath.animate( { 'path' : pathConfig.from }, speed, easing );
      } );

});

jsfiddle here

You could probably also do it slightly differently, and have just one handler that just iterated over the paths an animates them as well, but its probably a bit fiddlier.