CODEWITHSUNDEEP
javascriptanimationsvgsnap.svg
Edmundo Santos
Edmundo Santos

Reputation: 613

Snap.svg only select one path

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/

Upvotes: 1

Views: 1269

Answers (1)

Ian
Ian

Reputation: 13852

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.

Upvotes: 4

Related Questions