CODEWITHSUNDEEP
snap.svg
suazi
suazi

Reputation: 454

Snap SVG: Animating to and from a path

I've written a bit of code I thought would animate to a certain path then revert back to the original path via callback. It animates to the path but stops there, what am I doing wrong?

Example: jsfiddle

var speed = 250;

[].slice.call( document.querySelectorAll( '.arrow_button' ) ).forEach( function( el ) {

    var s = Snap( el.querySelector( 'svg' ) ),
        path = s.select( 'path' ),
        route = el.getAttribute( 'data-path-route' ),
        callback = function () {
            path.animate( { 'path' : path }, speed, mina.easeout );
        };

    el.addEventListener( 'click', function() {
        path.animate( { 'path' : route }, speed, mina.easein, callback() );
    } );

} );

Upvotes: 0

Views: 371

Answers (1)

Ian
Ian

Reputation: 13852

There are 2 main problems.

The first is that you are issuing callback() instead of callback. You don't want to run the function immediately (unless it returns a function), you want to run it later when the callback is desired, so remove the brackets.

The second is that you need to store the paths d property to animate back to, here called origPath.

So the code would look like...

var s = Snap( el.querySelector( 'svg' ) ),
    path = s.select( 'path' ),
    origPath = path.attr('d'),
    route = el.getAttribute( 'data-path-route' ),
    callback = function () {
            path.animate( { 'path' : origPath }, speed, mina.easeout     );
    };

    el.addEventListener( 'click', function() {
        path.animate( { 'path' : route }, speed, mina.easein, callback );
    } );

jsfiddle

Upvotes: 1

Related Questions