jquery"Animate()" is not working

Question

I want to use "Animate()" to pass feedback to the user after a click, but the animation is not happening.

I used css to determine what would be the final state of the animation and there, it worked, the object got the properties I wanted, but when I passed the properties pro "Animate", it just didn’t work, the object remains the same as the moment before the click.

A piece of code:

let ArwDw = $('#ArrowDown');


let ArwAnimationEnd = true;


ArwDw.click(() => {
    if(ArwAnimationEnd)
    {
        ArwAnimationEnd = false;
        ArwDw.animate({transform: 'scale(85%)', filter: 'opacity(0.8) grayscale(0.3) saturate(0.7)'}, 150, 'swing', () => {ArwAnimationEnd = true});
    }
});

:root
{
    --Color2: #ff608b;
}

.ArrowsPh
{
    cursor: pointer;
    fill: var(--Color2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="ArrowDown" width="90px" height="90px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
     <g transform="translate(-254 -232)">
         <path class="ArrowsPh" d="M107.741,10.99l-8.3,8.6a1.318,1.318,0,0,1-1.911,0,1.437,1.437,0,0,1,0-1.981L104.875,10,97.535,2.391a1.437,1.437,0,0,1,0-1.981,1.318,1.318,0,0,1,1.911,0l8.3,8.6a1.436,1.436,0,0,1,0,1.98Z" transform="translate(274.5 139.862) rotate(90)"/>
    </g>
</svg>

What did I do wrong? Is there a solution? The problem is that I’m trying to animate an SVG?

Answer 1

To documentation says:

All Animated properties should be Animated to a single Numeric value...

That is, the transform and the filter used do not have only a numerical value, so they won’t work with the Animate.

What you can do to circumvent is to add a class that has the properties you want:

let ArwDw = $('#ArrowDown');
let ArwAnimationEnd = true;
ArwDw.click(() => {
    if(ArwAnimationEnd)
    {
        ArwAnimationEnd = false;
        ArwDw.addClass("animate");
        setTimeout(()=>{ArwAnimationEnd = true;},150);
    }
});

:root
{
    --Color2: #ff608b;
}

.ArrowsPh
{
    cursor: pointer;
    fill: var(--Color2);
}
.animate {
  transition: all 150ms;
  transform: scale(85%);
  filter: opacity(0.8) grayscale(0.3) saturate(0.7);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="ArrowDown" width="90px" height="90px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
     <g transform="translate(-254 -232)">
         <path class="ArrowsPh" d="M107.741,10.99l-8.3,8.6a1.318,1.318,0,0,1-1.911,0,1.437,1.437,0,0,1,0-1.981L104.875,10,97.535,2.391a1.437,1.437,0,0,1,0-1.981,1.318,1.318,0,0,1,1.911,0l8.3,8.6a1.436,1.436,0,0,1,0,1.98Z" transform="translate(274.5 139.862) rotate(90)"/>
    </g>
</svg>