Snap.svg animating position on 2d axis

Question

Looking through the other posts about Snap.svg, I am not seeing much explanation regarding simple use of the animate function.

I can't quite understand the documentation and current examples of using element.animate.

I see that there are specific things that can be done (transform, rotate).. but what if I would like to just move something on a simple 2D axis?

Here is my current code snippet:

var s = Snap("#elevBox");
var elev1 = s.select("#elev1");
if(toggleColor == 0){
    elev1.animate({
        //transform: 'translate(-30,100)',
        transform: "r5,200,200",
        fill: "lightgreen"
    }, 1000);
    toggleColor = 1;
}else {
    elev1.animate({
        //transform: 'translate(0,0)',
        transform: "r5,100,100",
        fill: "red"
    }, 1000);
    toggleColor = 0;
}

I have toggleColor linked to clicking a button so I toggle between the two conditions in the if-else statement.

Can someone please advise me on how I can modify the attributes in transform to move left -> right or up -> down?

If there is any more information that would be helpful for me to provide, let me know. Thanks.

Using `transform: 'translate(...)` does not work? I tried it and I see no problem moving objects around. — ConnorsFan, Sep 23 '16 at 00:52
@ConnorsFan It's not that it doesn't work. I just wasn't getting the exact results I wanted from it. — KS7X, Sep 23 '16 at 16:04

score 2 · Accepted Answer · edited May 23 '17 at 12:09

To control translate: transform: 't300,300' Scale: transform: 's2' Rotation: transform: 'r45'
You could make all in single statment: transform: 's2r45,300,300'

You could select any element by Snap("#elevBox");

Useful references:

Thanks Ian: How do I understand Transform properties in snap.svg?

http://svg.dabbles.info/

http://codepen.io/collection/xnrJc/

var s = Snap("#elevBox");
var toggleColor = 0;


function start() {
 s.animate({
        transform: 't100,100',
        fill: "lightgreen"
    }, 1000, end);
}

function end() {
  s.animate({
        transform: 't300,300',
        fill: "red"
 }, 1000, start);
 } 


 start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<svg viewBox="0 0 1000 1000">
 <rect id="elevBox" x="100" y="100" width="100" height="100"/>
</svg>

Thanks very much Sohaib! This post helped me achieve what I needed. I was able to animate my SVG object in the way I wanted by using 'translate'. — KS7X, Sep 23 '16 at 16:07

Snap.svg animating position on 2d axis

1 Answers1