CODEWITHSUNDEEP
jqueryhtmlanimationsvgvivus
Hector
Hector

Reputation: 7025

Run SVG animation Backwards using Vivus.js

I am trying to run a SVG line animation backwards, but I can't seem to get it to work using the Vivus plugin

here is my code

my SVG:

<svg version="1.1" id="eco-system-line-1" class="eco-system-line active" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 2.9 64.5" enable-background="new 0 0 2.9 64.5" xml:space="preserve">
    <g>
        <path fill="none" stroke="#1C75BC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M 1.3 63.3 L 1.3 1.2"/>
    </g>
</svg>

my jQuery:

 var svgLine = new Vivus(eco-system-line-1);
 svgLine.play(-1);

The Vivus plugin website states "play(speed) Plays the animation with the speed given in parameter. This value can be negative to go backward, between 0 and 1 to go slowly, or superior to 1 to go fast. By default the value is 1."

For some reason when I add any negative value the plugin doesn't work, and I don't get any console errors.

Has anyone made this work?

The above code as a fiddle

Upvotes: 0

Views: 2651

Answers (2)

Martin
Martin

Reputation: 33

There is a method called "finish" which you can use.

svgLine.finish().play(-1);

That should do it.

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124129

When vivus starts there's no stroke drawn. It then progressively draws the stroke going forwards in time.

If you run it backwards it starts from no stroke and never gets round to drawing one.

You can run it backwards if you wait till its drawn something. E.g.

setInterval(function(){ svgLine.play(-1); }, 3000);

Presumably there's also a way to get it to start from a position of drawing something too if you read the documentation.

Upvotes: 2

Related Questions