Reverse animation effect when SVG is clicked?

Question

I have this cool pause/resume morph animation that I got inspired to do from the new YouTube Embed Player. Anyways, If you load the page you can see the SVG morphing works perfectly fine... and you can change the morph by changing the "from" and "to" attributes in the tag. But what I'm trying to do is edit those attributes with jQuery when ".ytp-play-button" is clicked, but for some reason it is not working, any help?

CODE DEMO: http://codepen.io/mistkaes/pen/jPdWMe

FULL PAGE DEMO: http://s.codepen.io/mistkaes/debug/jPdWMe

jQuery:

$(".ytp-play-button").click(function() {
   $("#ytp-12").attr({
    "from": "M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28",
    "to": "M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26"
   });
});

score 4 · Accepted Answer · edited May 23 '17 at 10:26

The animation that you have is defined to run only once on page load. In a different answer, it's explained how to make an SVG animation run when needed.

Create the <animation> with begin="indefinite" so that it won't treat the animation as starting on document load. You can do this either via JavaScript or raw SVG source.

Call beginElement() on the SVGAnimationElement instance (the <animate> element) when you're ready for the animation to start. For your use case, use a standard addEventListener() callback to invoke this method when you're ready

Applying this logic to your code, here's a working solution, that utilizes an extra variable to switch between the 2 shapes:

var flip = true,
    pause = "M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28",
    play = "M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26",
    $animation = $('#animation');

$(".ytp-play-button").on('click', function(){
    flip = !flip;
    $animation.attr({
        "from": flip ? pause : play,
        "to": flip ? play : pause
    // .get(0) is used to get the native DOM element
    // [0] would also work
    }).get(0).beginElement();
});

html {
    background-color: #1c1c1f;
}

button {
    outline: none;
    border: 0px solid;
    background: transparent;
}

.ytp-play-button {
    fill: #fff;
    opacity: 0.85;
    height: 175px;
}

.ytp-play-button:hover {
    cursor: pointer;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="ytp-play-button ytp-button" aria-live="assertive" tabindex="32" aria-label="Pause">
   <svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
         <path id="ytp-12" d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26">
            <animate id="animation" begin="indefinite" attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="1.1s" keySplines=".4 0 1 1" repeatCount="1"></animate>
         </path>
      </defs>
      <use xlink:href="#ytp-12" class="ytp-svg-shadow"></use>
      <use xlink:href="#ytp-12" class="ytp-svg-fill"></use>
   </svg>
</button>

Reverse animation effect when SVG is clicked?

1 Answers1