search

maxwellito / vivus-instant

Single page app to create independent stroke animated SVGs
332 stars 43 forks source link

Loop reverse option ? :) #10

Open anthonysalamin opened 6 years ago

anthonysalamin commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

anthonysalamin commented 6 years ago

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 commented 6 years ago

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