How to animate a SVG using Sketch and Keyshape

Hey guys, I just wanted to share my latest tutorial. It’s how to take vectors out of Sketch, animating them inside of Keyshape and eventually (in part 2) I’ll show how to very smoothly and easy get this into Rapidweaver. Hope you like it.

6 Likes

Hi

I’ve been experimenting with Keyshape to create SVG animations. They work fine in isolation, but I’m having problems with placing more than one animation per page. Sometimes the animations break up and behave oddly, sometimes they “cross-pollinate” and elements of one appear in another.

Maybe I’m getting keyshape to produce faulty code or something. Here’s an example on a test page on my old RW5 site: http://leemontgomery.co.uk/page26/

If anyone could take a look at this and give me some pointers, I’d be much obliged!

Thanks, LM

Hey! Have you checked that the animated layers have unique names? If an animated layer has the exact name as the other one the animation will stop automatically. All animated SVGs that reside on the same page needs to have unique IDs or it will not work.

1 Like

Wow time really flyies can’t believe it has been so long since I posted this tutorial here :laughing:

Hi Juan,

Sorry, I forgot that I left this question unanswered. This is exactly what the Keyshape support told me. Surprising that identical ids are the default setting, but I’m sure there’s a good reason.

Thanks for checking in for this.

Lee

1 Like

Great tutorials, by the way. Very good introduction to the app!

1 Like

Thanks! I have been using Keyshape for a couple of years now and when deciding to go between KS or After Effects (with Lottie) I always seem to use KS. It’s way easier to learn, it can import and export Lottie and the best format is actually SVG as KeyshapeJS since it works on about every browser, even IE!

I’m really eager to do a couple of new tutorials, I have been asked the question a couple of times now during the years since the first ones.:+1:

1 Like

…and happy to help out :smiley_cat:

I’ve been putting my tutorial creating time into this the last couple of years:

1 Like