CODEWITHSUNDEEP
javascriptsvg
badtant
badtant

Reputation: 183

SVG SMIL animation bug in Safari

I've been looking at an article about SVG animations.

Code: http://codepen.io/chriscoyier/pen/DpFfE

Article: http://css-tricks.com/svg-shape-morphing-works/

Works good except for in Safari desktop (and I guess also on iOS). The button should toggle between a yellow star and a green check symbol.

The animations work good the first two times the animation runs and the third time I get a green star instead of a green check. So the color animation did run but not the shape animation. After that it's all wrong.

Any ideas on whats wrong?

Thanks

Upvotes: 3

Views: 979

Answers (1)

Jesus CMD
Jesus CMD

Reputation: 184

I had the same problem, but I solved with help from this post: the trick is restart the timing for the animation with shape your svg inits:

var variconMorphID = document.getElementById("navbar-icon-hot");

var animationToHome = document.getElementById("morph-to-home");
var animationToFire = document.getElementById("morph-to-fire");

if (button.classList.contains("saved")) {
    button.classList.remove("saved");
    animationToFire.beginElement();
    buttonText.innerHTML = "Save";
  } else {
    button.classList.add("saved");

    variconMorphID.pauseAnimations();
    variconMorphID.setCurrentTime(0);
    variconMorphID.unpauseAnimations();

    animationToHome.beginElement();
    buttonText.innerHTML = "Saved!";
  }

Here is an example in CODEPEN:

http://codepen.io/jesuscmd/details/wWBEgR/

Upvotes: 3

Related Questions