snap.animate behaviour , some working some not please help

Ashutosh Chopra

unread,

Mar 25, 2023, 9:11:37 AM3/25/23

to Snapsvg

Hi, I am attaching some code to animate a small group which consists of a object (rect / circle etc) with some attached text.

In the snap.animate function/method, the FROM/ TO accepts a value of 0, xxx, where the change xxx in x,y coordinates is applied equally to both x an y. That will result in a motion at approximately 45 degrees. I need to specify the x, y values separately so that the motion can be from fully from a horizontal motion to a vertical motion.

I tried three options as can be seen from the code below, only the first animate function/method works.

Whats wrong, please help, I am confounded and searching on the internet for over a week has not helped.

here is the code:

<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
<script src="js/snap.svg-min.js"></script>
<style>
#svg {
background-color: #000;
}
</style>
</head>
<body>

<input id="button" type="button" class="zhxx_api_button" value="click Me">
<svg id="svg" width="494" height="406"></svg>

<script>
var svg = Snap(494,406);

var ta = Snap("#svg").paper.circle(100, 200, 8).attr({
"stroke": "#FF0",
"stroke-width": 2,
"fill": "#FF0",
"transform": "translate(200, 150)"
});

var ta_txt = Snap("#svg").paper.text(ta.getBBox().cx + 10, ta.getBBox().cy, "-01").attr({
"stroke": "#FF0",
"stroke-width": 1
});

var ta_group = Snap("#svg").group(ta, ta_txt);
//***********************************************

var ra = Snap("#svg").paper.rect(250, 200, 14,14).attr({
"stroke": "#F00",
"stroke-width": 2,
"fill": "#F00",
"transform": "translate(50, 200)"
});

var ra_txt = Snap("#svg").paper.text(ra.getBBox().cx + 10, ra.getBBox().cy, "00").attr({
"stroke": "#F00",
"stroke-width": 1
});

var ra_group = Snap("#svg").group(ra, ra_txt);
//***********************************************

document.getElementById("button").onclick = function() {

var x_move = 100;
var y_move = -100;

var path = "m 17.764486,109.36261 170.428034,-1.11027 -33.86355,47.18691";
var from = 0;

var to = path.getTotalLength();
var duration = 5000;
//METHOD 1 WORKS
Snap.animate(0,-200, function(val) {
ta_group.transform('translate(' + val + ',' + val + ')');
}, 2000);
// METHOD 2 FAILS
Snap.animate(0, {x_move, y_move}, function(val) {
ra_group.transform('translate(' + val + ',' + val + ')');
}, 7000);
// METHOD 3 FAILS
Snap.animate(from, to , function( val ) {
var point = path.getPointAtLength( val );
var movePoint_x = point.x - ra.getBBox().cx;
var movePoint_y = point.y - ra.getBBox().cy;
ra_group.transform( 't' + movePoint_x + ',' + movePoint_y);

}, duration);

}; //button press

</script>
</body>
</html>

Ian

unread,

Mar 25, 2023, 9:51:51 AM3/25/23

to Snapsvg

Couple of thoughts, iirc animate can take an array so you could anim from [0,0] to [100,500] and use those values. So maybe would look like

Snap.animate([0,0],100,200], function(val) { ta_group.transform('t' + val[0] + ',' + val[1] ); }, 1000)

Other option could be to run 2 separate animations and animate x with one, and y with another.

Ashutosh Chopra

unread,

Mar 26, 2023, 7:25:14 AM3/26/23

to Snapsvg

Hi Ian,

Thanks for your reply.

It got me going in the correct direction.

I used this:

Snap.animate([0,0],[100, 100], function(val) {
ta_group.transform('translate(' + val[0] + ',' + val[1] + ')');
}, 2000);

Where [0,0] is the existing coordinates of the element group and [100,100] are the [Increment in X, Increment in Y] from the original position.

Thanks a ton for responding and helping out.

Best Regards

Ashutosh

Reply all

Reply to author

Forward