Question

I'm crafting, mostly to get the thing, a small animation/test using Snap.svg JS library.

Here's the link to my online experiment and code: http://codepen.io/nobilelucifero/pen/nmofF

The SVG is "compressed", anyway the basic structure is

#saucy
    #dragon
        #body
        #ears
        #...

What I'm trying hard to achieve is using the same function to perform mostly identical animations to just the body parts I want to move, not all of them.

If I remove, for example, the Ears related code

// Animate Ears
var bounceEars = new animBounce({'what': ears, 'r': -10, 'x': 130, 'y': 120});
bounceEars.init();

the body continues to move as intended. Instead, together, the two body parts I want to move perform just the very first part of the cycle. I'm sure I'm missing something that's even basic JS code, but feel a bit lost. Does anyone of you have suggestions for me? Any advice is welcome!

Thanks a lot in advance.

EDIT: if I defer one function by 0 value, it works. Why?

setTimeout(function(){
    bounceEars.init();
}, 0);
Was it helpful?

Solution

transform: 'r' + [this.args.r, this.args.x, this.args.y].join(',')

you need to convert yout arrays to strings ... just use .join(',')

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top