Jump to content
Search Community

Reverse SVG animation

eugenedrvnk test
Moderator Tag

Recommended Posts

That is one massive SVG file, hah. I'm betting you could decrease the size pretty significantly if you optimized your SVG paths and then run it through SVGOMG.

 

SMIL animations are not recommended. They are completely unsupported in IE and Edge, their future support is uncertain (Webkit is likely to remove support at some point in the future), and the capabilities of it are quite limited. The best way to animate SVG in the modern day web is JavaScript, no question. And GSAP is (arguably) the best way to animate using JavaScript (if you ask us :D). This sort of animation is easily done in GSAP and will indeed give you full control over playback including the duration, reversing it, etc. And it will work in every browser all the way back to IE9! 

 

I think you'll come to love GSAP because of how easy and powerful it is, especially with SVG. There are even some incredibly handy SVG plugins like DrawSVG and MorphSVG that you should check out - they will let you add some pretty fun effects in your animations!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...