CODEWITHSUNDEEP
javascripthtmlraphael
Dymond
Dymond

Reputation: 2277

Stop animation and reset position of an element in Raphaël.js

I have this simple animation that moves from side to side, Im trying to create a reset button so that the animation stops and gets back to default, but I cant seem to get i right.

The library I am using is Raphael, but I'm almost sure that with a simple javascript I can reset the values inside the function.

Body onload init function

function init() {
  paper = Raphael("loadSVG");

  var bg = paper.rect( 0, 0, "240px", "90px", 0 );
  bg.attr( {fill: "#f3f3ff"} );
  rect1 = paper.rect(150, 20, 50, 50);
  rect1.attr( {fill: "#ffaaaa", "stroke-width": 3} );
}

The animation function

function moveRect1() {      
  if( xEnd == 150 )
    xEnd = 50;
  else
    xEnd = 150;

  rect1.animate( {x: xEnd}, 1000, "Sine", function (){ 
    moveRect1(); 
  }); 
}

and the stop button that don't work :)

function stopsvgRect1() {
  rect1.stop();
}

Upvotes: 2

Views: 2134

Answers (1)

dan-lee
dan-lee

Reputation: 14502

You need to bind the stop button to the function you've created.

For example like this:

document.querySelector('#stop').onclick = function() {
    stopsvgRect1();
};

Open this fiddle to see it in action.

edit:

As the position should also be resetted, you can choose Raphael.transform() for this action.

Open my updated fiddle to see how it works.

Upvotes: 2

Related Questions