Skip to content

Juans best Keyshape tips and tricks

Hey guys! Yesterday I had a presentation internally about Keyshape, my go-to tool for animating everything from icons to illustrations. Today I recorded an international version for all of you to enjoy ? ? ✅

9 out of 10 times I use this marvellous animation app because it does so many things right:

  • Easy to use interface that resembles a bit of Flash (in a good way ?)
  • Amazing export options (CSS, Lottie, Android Vector Drawables, KeyshapeJS, MP4, GIF etc)
  • The code output is clean and easy to implement in projects

Lottie import and export!

Lottie is a hugely popular animation format that works about everywhere. Via the official Keyshape Lottie plugin you add animation super powers to a very affordable app.

Many times when I need to animate something complex I usually do this:

  1. Browse around Lottiefiles.com to find an open source animation
  2. Download the Lottie JSON file and open it up inside Keyshape
  3. Change things like colors, timing etc
  4. Export the animation again to either Lottie or any other format that suits my current project needs
  5. If I export it again as Lottie I drag+drop it into Lottie Preview for testing it out, distributing it further. All your animations that you add to preview and don’t publish to Lottiefiles.com are by default private. But here’s the neat thing, you can still share them with your developers. ? ❤️

Animate once, use everywhere

Also, since I now have the animation inside Keyshape, it’s a piece of cake exporting it or adapting it for several use case.

Some of you may now this, most of you won’t: Keyshape is actually responsible for me doing video tutorials in the first place. When I started using it in 2017 there where the total amount of 0 video tutorials about Keyshape. I felt a strong need to start showing the world how awesome this little animation gem was. I still do!

So without further notice, here are a couple of great tips I have gathered through my experience.

Bonus beats

As an added bonus, here’s Fredrik’s NPM package for easier use of Keyshape animations in React. Go team!

Tags: