Convert CSS Animated SVG's to GSAP Animated SVG's

[Tay]

I have SVG's which were created in SVGator, the SVG animation rules are auto generated and in CSS. Test_CSS.svg is such a file. 

Is there a simple way to build those rules in GSAP, without me spending a long time trying to replicate them. I started trying to identify the @keyframe rules in JS and extract them to replicate the animation in JS. But it's just very hard work.

 

Is there a library for that. Basically Input the CSS -> Get the Animation in GSAP.

 

Thanks already for all your input!

Test_CSS.svg

[Cassie]

Hi there!

 

Sorry to be the bearer of bad news - but there's no automatic way. As someone who had to convert a metric ton of CSS animated banner ads to GSAP back in the day - I feel ya.

We're happy to help with pointers if you're struggling to figure out the GSAP way to do a specific bit of CSS.

I would personally ignore the way the CSS is written and rather try to replicate the final animation, CSS is all about percentages and adding delays to keyframe blocks whereas GSAP has timelines and seconds. So you can write out animations a lot more logically. (At least in my head.)

step by step - 'spin x element for 3 seconds, then wait for a second, then scale up y element' for 3 seconds'
 

let tl = gsap.timeline();

tl.to('x', {
 rotate: 360,
 duration: 3
})
tl.to('y', {
 scale: 2
 duration: 3
}, '+=1')

You can also utilise GSAP's percentage keyframes if you want to write everything out in a way that's more like the existing CSS

 

Good luck and God speed!

[Tay]

Thanks a lot for your detailed answer and the advice @Cassie. The problem is that I have to manage a lot of those animation's (30 - 50) and some of them will be much more complex. Converting those manually would be very time intensive.

[Cassie]

Yeah. I converted hundreds of ads manually back in the day. I feel your pain. The only solution really is to spend the time converting them. The plus side is you get really good at writing timelines by the end, it's a pretty good way to get good at GSAP fast.

...Or just use GSAP from the start! That's not really helpful advice once you're in this pickle though.

Rewriting using GSAP's keyframes will make your life easier in the short term but starting fresh and creating nicely structured timelines will allow for those animations to be tweaked and adjusted easier in the long run. 

 

Good luck with it!