Scale (0) -> Scale (1) animation

[alexfromgalax87]

Hello i have a problem animating a - element. Its initial scale value is "transform: scale(0 , 1)", so it has 0 width and 100% height. If i try to animate it with a matrix to scale(1, 1) no animation will be applied.

var s = Snap("#fc1278902421_85CFBE4D4F8B46DA9A43153708E63B6Cg");

var myMatrix = new Snap.Matrix(); myMatrix.scale(1);
myMatrix = myMatrix.invert();

s.animate({ transform: myMatrix },3000, mina.bounce );

Funny thing is that if i set the initial scale to (1, 1) and use the matrix to scale it downwards to 0, it works.

Any ideas on this issue?

[ibrierley]

Can you put the example on a jsfiddle ?

[alexfromgalax87]

https://codepen.io/anon/pen/GMXorW

top example should animate from Scale(0, 1) to Scale(1,1) bottom example does animate from Scale(1, 1) to Scale(0, 1)

[alexfromgalax87]

Funny thing is if i apply the animation twice it starts working:

https://codepen.io/anon/pen/GMXoXM

[ibrierley]

I think the problem is probably trying to animate something we're not quite sure how it's represented behind the scenes by Snap, whether it's still a matrix, or what (Snap typically works better with its transform strings). I do feel in this particular case it probably should be able to handle it though, however matrices are typically quite fiddly when animating, and I'm partly guessing it's barfing on trying to animate from a matrix to a transform string (or vice versa).

I think to get around this, you could possibly just do...

s.transform(s.transform())

https://codepen.io/anon/pen/MEqoNG

Whilst this seems pointless, I think what it's doing is resetting how the transform is stored. This is possibly also why running the animation twice seems to work. First time it's probably resetting how it's represented by accident.

I do think it would be nice to have a solution that handles it nicely in the library though.