CODEWITHSUNDEEP
javascriptsvg
Falquiero
Falquiero

Reputation: 125

SVG animation Round Trip?

I'd like to make my svg shrinking onclick, and growing on click when shrinked.

How is this achievable ? I tried some stuff in Javascript but couldn't find an easy way to proceed.

For example this SVG : 

    <svg id="MyRect" width="100" height="100" viewbox="0 0 100 100">
        <polygon fill="#000000" points="0,0 0,100 100,100 100,0">
            <animate id="shrink" attributeName="points" begin="undefined" restart="whenNotActive" dur="1s" from="0,0 0,100 100,100 100,0" to="30,30 30,70 70,70 70,30" fill="freeze" />
            <animate id="grow" attributeName="points" begin="undefined" restart="whenNotActive" dur="1s" from="30,30 30,70 70,70 70,30" to="0,0 0,100 100,100 100,0" fill="freeze" />
        </polygon>
    </svg>

How Can I manage to trigger an animation or the other according to his "state" ?

Thanks.

Upvotes: 0

Views: 103

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

You can't change the animation each time you click with pure SMIL so I swap between two polygons with different animation. There's no javascript required in my solution.

    <svg id="MyRect" width="100" height="100" viewBox="0 0 100 100">
        <polygon fill="#000000" points="0,0 0,100 100,100 100,0">
            <animate id="shrink" attributeName="points" begin="click" restart="whenNotActive" dur="1s" to="30,30 30,70 70,70 70,30" fill="freeze" />
            <set attributeName="display" begin="shrink.end" to="none" />
            <set attributeName="display" begin="grow.end" to="block" />
            <set attributeName="points" begin="grow.end" to="0,0 0,100 100,100 100,0" />
        </polygon>
        <polygon fill="#000000"  points="30,30 30,70 70,70 70,30" display="none">
            <animate id="grow" attributeName="points" begin="click" restart="whenNotActive" dur="1s" to="0,0 0,100 100,100 100,0" fill="freeze" />
            <set attributeName="display" begin="grow.end" to="none" />
            <set attributeName="display" begin="shrink.end" to="block" />
            <set attributeName="points" begin="grow.end" to="30,30 30,70 70,70 70,30" />
        </polygon>
    </svg>

Upvotes: 2

Related Questions