eugenedrvnk Posted December 19, 2019 Share Posted December 19, 2019 I have some svg animation, that plays only once after page load. Is it real with help of gsap, manipulate this animation, change duration, reverse animation, etc? (if there are some problems with animation, here everything must be okay : https://jsfiddle.net/Lfdztupc/) See the Pen NWPpWzP by eugenedrvnk (@eugenedrvnk) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted December 19, 2019 Share Posted December 19, 2019 Hey @eugenedrvnk, GSAP animates SVGs perfectly - even complex processes ... See the Pen VwYpLyP by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 19, 2019 Share Posted December 19, 2019 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 ). 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now