Loop reverse option ? :)

[anthonysalamin]

Hi there,

I'm new to github so I appologize if this is not the right place to post (?)
Amazing little app for SVG animation, I wanted to know, if it'd be possible to apply a "reverse animation" while looping the svg animation ?

Amazing work again, thank you :)
Anthony

[maxwellito]

Hi Anthony, Thanks for your kind words :) However, I'm afraid Vivus instant doesn't provide the reverse animation. There's only two ways: using Vivus.js and control the animation with JavaScript, or hack the SVG outputted by Vivus-instant. Not sure about what to recommend :-S Sorry about that Max

[anthonysalamin]

Thank you very much for your answer !
I found a work around, using the fading option from vivus-instant, works actually pretty fine !
you can have a look at what i did here if you want :) (I'm a graphic designer but learning front-end developement with webflow)

http://tlhsierrecmspreview.webflow.io/

Anthony

[maxwellito]

Pretty nice indeed! :) It fits well with your design!

[anthonysalamin]

Thank you !
I updated it, as I realised the way we stack strokes in illustrator while building the logo, influences the way vivus will render the animation ! I now re-ordered the layers in illustrator and got a much smoother animation ! Really interesting script, I hope I can do something more complex in the future ! I kind of love svg now !!

Great stuff :)

[anthonysalamin]

Hi animated with your script a new logo I did for a stat-up not long ago to show people the construction process, looks pretty cool now !! wish I could animate the fill parts too. But still the stroke animation brings my stuff to a whole new level of coolness ! Thank you ! :)

https://www.anthonysalamin.ch/projects/mindsquare